如何让图片固定在另一张图片指定位置（响应式适配）？

我知道你现在头疼的是图标在窗口缩放时Y轴会跑偏，明明想固定在MO区域，用bottom:45%却不管用。其实问题出在两个地方：要么是地图图片的行内元素特性导致父容器高度不准，要么是定位参考的容器没有和地图保持一致的宽高比。下面给你两个简单有效的解决方案：

方法1：快速修复（最省心） #

原来的地图图片是行内元素，浏览器会默认在它底部留一点空白，导致父容器的高度比图片实际高度高一点。这时候bottom:45%是基于父容器的高度计算的，不是图片本身的高度，缩放时自然会偏移。只需要改两行CSS就能搞定：

/* 给父容器加相对定位，作为图标的定位基准 */
.map-container {
  position: relative;
  width: 100%;
}

/* 把地图图片改成块级元素，去掉底部的空白间隙 */
#img1 {
  width: 100%;
  height: auto;
  display: block;
}

/* 图标还是原来的定位，现在基准是正确的了 */
#img2 {
  width: 15%;
  position: absolute;
  left: 48%;
  bottom: 45%;
}

对应的HTML只需要给外层div加个类：

<div class="map-container">
  <img id="img1" src="http://americandreamreschool.com/map/Help/assets/images/simple.png">
  <img id="img2" src="https://image.flaticon.com/icons/png/128/149/149440.png">
</div>

这样调整后，父容器的高度完全和地图图片一致，图标定位的百分比就是基于图片实际高度计算的，缩放时位置自然就固定了。

方法2：固定宽高比（更稳定） #

如果希望地图始终保持原始比例，不会因为窗口拉伸变形，这个方法更适合。首先你需要知道地图图片的宽高比，比如你提供的美国地图尺寸是1200×675，宽高比是16:9。我们可以让容器始终保持这个比例：

.map-container {
  position: relative;
  width: 100%;
  /* 用padding-top模拟宽高比，计算方式是(高度/宽度)*100%，这里就是675/1200*100% = 56.25% */
  padding-top: 56.25%;
  /* 现代浏览器也可以直接用aspect-ratio属性，更简单：aspect-ratio: 16/9; */
}

/* 让地图图片绝对定位占满容器，保持比例 */
#img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 确保图片完整显示，不会被裁剪 */
}

/* 图标定位和之前一样 */
#img2 {
  position: absolute;
  width: 15%;
  left: 48%;
  bottom: 45%;
}

HTML和方法1相同。这个方法的好处是容器尺寸永远和地图图片比例一致，不管窗口怎么缩放，地图都不会变形，图标位置也会牢牢固定在MO区域。

你可以根据自己的需求选其中一个方法，亲测都能解决你的问题～

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