如何将子图像按比例缩放以适应父元素？

Question

如何将子图像按比例缩放以适应父元素？

3

我有一张大图，换句话说就是地图。我还有标记，这些标记附加在地图的某些位置上。下面是一个示例。

地图和标记被包裹在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/。我之所以不直接将标记合并到地图中，是因为我想为标记添加悬停效果。提前感谢您的帮助！

- Engin

2

https://codepen.io/Paulie-D/pen/dgcha - Paulie_D

2个回答

-1

使用calc()函数来计算基于浏览器大小(%)的位置。

- jerusalem

谢谢您的回复。如果您不介意，能否给我提供一个例子？ - Engin

例如，如果您的标记位于距离顶部25％和左侧10％的位置，并且您的标记为50px x 50px，则您的代码可能如下所示：top: calc(25% - 25px); left: calc(10% - 25px); 减法是为了使标记在您想要的点上居中。 - jerusalem

这也是我一开始尝试的方法，但标记并没有按比例缩小到地图上。 - Engin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bitski · Accepted Answer

保持地图上标记的位置

使用相对百分比单位来设置标记的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;
}