父容器缩放时如何保持子元素相对于图片的百分比位置

当前红点的left:40%和top:40%是相对于占满整个视口的#wrap容器的，但当容器宽高比和图片不一致时，图片会按比例缩放，导致红点和图片的相对位置跑偏。要解决这个问题，核心是让标记点的百分比定位参考图片的实际显示区域，而不是整个容器。

方法1：将图片设为容器背景并固定宽高比 #

把图片作为#wrap的背景图，同时用aspect-ratio匹配图片的原始宽高比（示例图片宽1200px、高800px，比例为3:2），这样容器会始终保持和图片一致的比例，标记点的百分比定位就会准确对应图片位置。

#wrap{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg') no-repeat center / contain;
  aspect-ratio: 1200 / 800; /* 匹配图片原始宽高比 */
}
.pin{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:40%;
  top:40%;
  transform: translate(-50%, -50%); /* 让红点中心对准标记位置 */
}

<div id="wrap">
  <div class="pin"></div>
</div>

方法2：给图片添加比例容器，标记点相对该容器定位 #

给图片套一个专用容器，用aspect-ratio固定图片比例，标记点相对于这个容器定位，确保定位参考的是图片的显示区域。

#wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-container{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1200 / 800; /* 匹配图片原始宽高比 */
}
.pin{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  left:40%;
  top:40%;
  transform: translate(-50%, -50%); /* 红点中心对准标记点 */
}
img{
  display:block;
  width:100%;
  height:100%;
  object-fit: contain; /* 保持图片比例不拉伸 */
}

<div id="wrap">
  <div class="img-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg"/>
    <div class="pin"></div>
  </div>
</div>

关键说明 #

• aspect-ratio的值需要和图片原始宽高比一致，你可以通过查看图片属性获取宽高后计算比例。
• transform: translate(-50%, -50%)是为了让红点的中心对准设置的百分比位置（默认是红点左上角对齐），如果不需要可以去掉。
• 两种方法都能保证无论容器如何缩放，标记点始终相对于图片保持固定位置。

内容的提问来源于stack exchange，提问作者Toniq