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

Question

我有一张大图，也就是一张地图。我也有附加到地图某些位置的标记。在下面，您可以看到一个示例。

地图和标记被包裹在map-wraper 中，并且是绝对定位的。

HTML

<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() 函数根据浏览器大小 (%) 计算位置。