如何按比例调整子图像与父图像的大小？

Question

我有一个很大的图像，换句话说，一张地图。我还有一些标记附在地图的某些位置上。在下面，您可以看到一个示例。

​

​

映射和标记被包装在map-wraper中，并被定位为绝对。

<div class="map-wrapper">
  <img src="map.png" id="map" alt="Map">
  <img src="marker-1.png" id="marker-1" alt="Shop">
  <img src="marker-2.png" id="marker-2" alt="House">
</div>

CSS

.map-wrapper {
  position: relative;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#marker-1 {
  position: absolute;
  top: 140px;
  left: 300px;
}

#marker-2 {
  position: absolute;
  top: 80px;
  left: 40px;
}

问题是，当我调整浏览器的大小时，标记就不正确了。我希望这些标记也能按照父母的比例调整大小。在这种情况下，map-wrapper。

我尝试过这个CSS技巧，但没有帮助。https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

我之所以不只是将标记与地图合并，是因为我想给标记设置悬停效果。

提前感谢！

Answer 1

保持标记在地图上的位置

对标记的top和left CSS属性使用相对百分比单位。

这样，相对于相对定位的父容器<div class="map-wrapper">，标记应该保持在相同的位置。

#marker-1 {
  position: absolute;
  top: ...%;
  left: ...%;
}

#marker-2 {
  position: absolute;
  top: ...%;
  left: ...%;
}

保持标记相对包装尺寸()的大小

对标记的height使用相对百分比单位，并将其width设置为auto。

这样，标记相对于相对定位的父容器的<div class="map-wrapper">高度应该保持相同的大小。

#marker-1 {
 ... some properties here...
 height: ...%;
 width: auto;
}

#marker-2 {
 ... some properties here...
 height: ...%;
 width: auto;
}

Answer 2

使用calc()函数根据浏览器大小(%)计算位置。