如何使Div内子元素与背景图元素位置完全匹配且适配所有设备？

问题根源 #

你遇到的偏移问题本质是两个原因：

1. 主容器宽高比和背景图不一致，导致background-size: contain后背景图在容器内的位置、占比随设备视口变化
2. 小图用relative定位时，left/top是相对于容器宽高，但容器宽高比变了，背景图和容器边缘的间距就会改变，小图自然错位

实现步骤 #

1. 锁死容器宽高比 #

先算出背景图的原始宽高比（比如背景图是1920x1080，比例就是16:9），用aspect-ratio让容器严格保持这个比例。这样不管设备怎么变，容器和背景图的比例完全匹配，背景图能刚好填满容器，不会留空白。

2. 小图用绝对定位 #

把主容器设为position: relative，小图改成position: absolute。这样小图的left/top是相对于容器的，而容器比例和背景图一致，百分比定位就能精准对应背景图里的建筑位置，不会偏移。

3. 控制容器不超视口 #

给容器加max-width: 100vw和max-height: 100vh，避免容器超出屏幕，再用margin: auto让容器居中，保证用户能看到完整图片，不会出现滚动。

代码示例 #

普通CSS写法 #

<div style="
  position: relative;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 16/9; /* 替换成你的背景图实际宽高比 */
  margin: 0 auto;
  background-image: url('/images/Town_5.png');
  background-size: cover;
  background-repeat: no-repeat;
">
  <img 
    src="/images/House_4.png" 
    style="
      position: absolute;
      left: 7%;
      top: 5%;
      width: 17%;
      opacity: 0.7;
      transition: opacity 0.3s;
    "
    onmouseover="this.style.opacity='1'"
    onmouseout="this.style.opacity='0.7'"
  >
  <img 
    src="/images/Mine_1.png" 
    style="
      position: absolute;
      left: 40%;
      top: 0%;
      width: 21%;
      opacity: 0.7;
      transition: opacity 0.3s;
    "
    onmouseover="this.style.opacity='1'"
    onmouseout="this.style.opacity='0.7'"
  >
</div>

Tailwind CSS写法 #

<div class="relative w-full max-w-screen max-h-screen mx-auto aspect-[16/9] bg-[url('/images/Town_5.png')] bg-cover bg-no-repeat">
  <img 
    src="/images/House_4.png" 
    class="absolute left-[7%] top-[5%] w-[17%] opacity-70 transition-opacity hover:opacity-100"
  >
  <img 
    src="/images/Mine_1.png" 
    class="absolute left-[40%] top-0 w-[21%] opacity-70 transition-opacity hover:opacity-100"
  >
</div>

补充说明 #

• 旧浏览器兼容：如果要支持不支持aspect-ratio的浏览器，用padding-top替代，比如16:9比例，容器设height: 0; padding-top: 56.25%（9÷16×100%）
• 背景图选择：因为容器比例和背景图一致，background-size: cover和contain效果一样，选哪个都行
• 小图定位数值：需要根据背景图实际比例精确调整，一旦调好，所有设备上位置都不会变
• 禁止滚动：给body加overflow: hidden，避免页面出现滚动条

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