相对图像映射

Question

大家好
我试图在网页上放一张图片，并使其中的一部分可以点击
我找到了这个网站，它非常方便。然后我添加了一个小jquery，并将这些部分做成了一个按钮等。
但问题是，我希望这个图像在不同尺寸和比例的显示器中正确显示
这个网站的坐标是绝对的，你知道这对页面响应来说不是一件好事
有没有办法使这些坐标以某种方式相对？(我认为这不是最有可能的解决方案(
或者有没有其他方法可以使图像的一部分可点击，并使带有图像的页面保持响应
非常感谢：(

Answer 1

这里有一个简单的例子，而不是我之前链接的笔，使用scale((、margin和mediaquery来重置它们的值。

由于变换对变换图元使用的原始大小和空间没有影响，所以如果重新缩放它，它使用的房间就不会。利润率可以越过它，在放大的同时增加它周围的利润率以将东西推开，在缩小的同时以负值减少利润率以拉动它周围的东西。

img {
border: solid;
display: block;
margin: auto;
}
@media screen and (min-width:250px) {
img {
transform: scale(0.5);
margin: -75px -125px;
}
}
@media screen and (min-width:500px) {
img {
transform: scale(0.8);
margin: -30px -50px;
}
}
@media screen and (min-width:800px) {
img {
transform: scale(1.5);
margin: 75px 125px;
}
}
@media screen and (min-width:1200px) {
img {
transform: scale(2);
margin: 150px -250px;
}
}
map {/* for the demo, wrap it and use a div to avoid funny behaviors */
display: grid;
justify-content: center;
}

<map name="map_example">
<area shape="rect" coords="98,60,375,220" href="#sunny" alt="Sun">
<img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw"    alt="image map example" width='500' height='300' usemap="#map_example">  
</map>

如果你需要在图像上添加可见元素，你可以使用网格(或绝对定位(，地图就变得不必要了(浏览器不应该显示区域(。该方法与重新缩放时的重置裕度相同。

* {
margin: 0;
box-sizing: border-box;
}
div {
display: grid;
justify-content: center;
width: 500px;
height: 300px;
}
a,
img {
grid-row: 1;
grid-column: 1;
border: solid;
}
a {
width: 280px;
height: 160px;
margin: 60px 0 0 97px;
background: linear-gradient(to bottom left, rgba(100, 200, 50, 0.5), gray, rgba(255, 125, 0, 05));
/*chrome*/ position:relative;
}
a:hover {
background: none;
}
@media screen and (min-width:250px) {
div {
transform: scale(0.5);
margin: -75px -125px;
}
}
@media screen and (min-width:500px) {
div {
transform: scale(0.8);
margin: -30px -50px;
}
}
@media screen and (min-width:800px) {
div {
transform: scale(1.5);
margin: 75px 125px;
}
}
@media screen and (min-width:1200px) {
div {
transform: scale(2);
margin: 150px 250px;
}
}

<div>
<img src="https://th.bing.com/th/id/R27c41ba1d38afc9894a202c4d1dfdf7f?rik=941mYlhkC070wQ&riu=http%3a%2f%2fwww.thesmartbaby.com%2f_borders%2fgreenrectangle.jpg&ehk=YSaA6ZnTbw02zKN1w%2b9P5cze61mc4XAJ4YpPeX7inO0%3d&risl=&pid=ImgRaw" alt="image map example"
width='500' height='300' usemap >
<a href="#sunny"> green rectangle</a>
</div>

可以删除usemap属性。我离开这里看图片，添加了一个像链接一样变成蓝色的边框。看起来这张图片是firefox其他地方的链接：(。