相对形象图

Question

那么大家好。
我试图将图片放在网页上并使其部分可点击。
我找到了 this 个网站，它非常方便。然后我添加了一点 jquery 并将这些部分制作成按钮等
但问题是我希望这张图片在不同尺寸和比例的显示器上都能正确显示。
该站点的坐标是绝对坐标，您知道这对于使页面响应不是一件好事。
有什么办法可以使这些坐标以某种方式相对吗？（我相信这不是最有可能的解决方案）
或者是否有任何其他方法可以使图像的一部分可点击并保持带有图像的页面响应？
非常感谢:)

Answer 1

这里是一个简单的例子，而不是我之前 link 编辑的笔，使用 scale()、margin 和 mediaqueries 来重置它们的值。

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

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 属性。我离开这里是为了图像，并添加了一个像 link 一样变成蓝色的边框。看起来这张图片应该是 Firefox 其他地方的 link:).

相对形象图

Relative image map

html

javascript

css

frontend

position