如何按 parent 的比例调整 child 图片的大小？

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;
}

问题是当我调整浏览器大小时，标记错位了。我希望标记也可以根据它们的 parents 按比例调整大小。在这种情况下 map-wrapper.

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

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

提前致谢！

Answer 1

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

Answer 2

保持标记在地图上的位置

对标记的 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;
}

如何按 parent 的比例调整 child 图片的大小？

How to resize child images proportionally to parent?

html

css

responsive-design