如何在background-size:contain的背景图上定位指定区域的div？

这个问题我之前也遇到过——用background-size:contain时，背景图的位置和尺寸会随容器动态变化，直接给div写固定定位或百分比肯定会错位。不过有两种可行的解决思路，我给你详细说说：

这个思路的核心是利用background-size:contain的行为规律，先算出背景图在容器中的实际显示尺寸和偏移量，再根据挡风玻璃在原图中的相对位置，换算出div的绝对定位坐标。

具体步骤：

1. 获取背景图的原始尺寸：创建一个隐藏的<img>元素加载目标图片，通过naturalWidth和naturalHeight拿到图片的原始宽高（避免图片缩放后的尺寸干扰）。
2. 计算比例关系：分别算出容器的宽高比（容器宽度/容器高度）和图片的宽高比（原始宽度/原始高度）。
3. 判断背景图的填充模式：
   • 如果图片宽高比 > 容器宽高比：背景图会横向填满容器，高度方向居中。此时图片的实际高度 = 容器宽度 / 图片宽高比，上下留白的高度 = (容器高度 - 图片实际高度)/2。
   • 如果图片宽高比 < 容器宽高比：背景图会纵向填满容器，宽度方向居中。此时图片的实际宽度 = 容器高度 * 图片宽高比，左右留白的宽度 = (容器宽度 - 图片实际宽度)/2。
4. 换算div的定位坐标：假设你已经知道挡风玻璃在原图中的相对位置（比如距离左边缘30%、上边缘20%，宽度40%、高度15%），用下面的公式计算：
   • div的left = 左右留白宽度 + 图片实际宽度 * 0.3
   • div的top = 上下留白高度 + 图片实际高度 * 0.2
   • div的width = 图片实际宽度 * 0.4
   • div的height = 图片实际高度 * 0.15
5. 监听窗口 resize 事件：容器尺寸变化时，重新执行上述计算，更新div的样式。

简化的JS代码示例：

const container = document.querySelector('.car-bg-container');
const overlay = document.querySelector('.windshield-overlay');
const img = new Image();
img.src = '你的汽车图片地址';

img.onload = () => {
  const updateOverlayPosition = () => {
    const containerW = container.clientWidth;
    const containerH = container.clientHeight;
    const imgW = img.naturalWidth;
    const imgH = img.naturalHeight;
    const containerRatio = containerW / containerH;
    const imgRatio = imgW / imgH;
    
    let actualImgW, actualImgH, offsetX, offsetY;
    
    if (imgRatio > containerRatio) {
      actualImgW = containerW;
      actualImgH = containerW / imgRatio;
      offsetX = 0;
      offsetY = (containerH - actualImgH) / 2;
    } else {
      actualImgH = containerH;
      actualImgW = containerH * imgRatio;
      offsetY = 0;
      offsetX = (containerW - actualImgW) / 2;
    }
    
    // 假设挡风玻璃在原图中的相对参数：left30%，top20%，width40%，height15%
    const windLeft = 0.3;
    const windTop = 0.2;
    const windWidth = 0.4;
    const windHeight = 0.15;
    
    overlay.style.left = `${offsetX + actualImgW * windLeft}px`;
    overlay.style.top = `${offsetY + actualImgH * windTop}px`;
    overlay.style.width = `${actualImgW * windWidth}px`;
    overlay.style.height = `${actualImgH * windHeight}px`;
  };
  
  updateOverlayPosition();
  window.addEventListener('resize', updateOverlayPosition);
};

如果不想写复杂的JS计算，也可以把背景图换成<img>标签，配合object-fit:contain实现和background-size:contain完全一致的显示效果，再通过相对定位容器来辅助div的定位。

这种方案的优势是：img的实际尺寸和位置可以直接通过DOM API获取，计算逻辑更简单。

示例代码：

<div class="car-container">
  <img src="你的汽车图片地址" alt="汽车背景" class="car-bg-img">
  <div class="windshield-overlay"></div>
</div>

.car-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.car-bg-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 和background-size:contain效果一致 */
}

.windshield-overlay {
  position: absolute;
  border: 2px solid red; /* 方便调试看位置 */
  pointer-events: none; /* 不干扰背景图的交互（如果有的话） */
}

对应的JS逻辑：

const container = document.querySelector('.car-container');
const bgImg = document.querySelector('.car-bg-img');
const overlay = document.querySelector('.windshield-overlay');

const updateOverlay = () => {
  // 获取img的实际位置和尺寸
  const imgRect = bgImg.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();
  
  // 计算img相对于容器的偏移量
  const offsetX = imgRect.left - containerRect.left;
  const offsetY = imgRect.top - containerRect.top;
  
  // 原图中挡风玻璃的相对参数（示例值）
  const windLeftRatio = 0.3;
  const windTopRatio = 0.2;
  const windWidthRatio = 0.4;
  const windHeightRatio = 0.15;
  
  const scale = bgImg.width / bgImg.naturalWidth;
  overlay.style.left = `${offsetX + bgImg.naturalWidth * windLeftRatio * scale}px`;
  overlay.style.top = `${offsetY + bgImg.naturalHeight * windTopRatio * scale}px`;
  overlay.style.width = `${bgImg.naturalWidth * windWidthRatio * scale}px`;
  overlay.style.height = `${bgImg.naturalHeight * windHeightRatio * scale}px`;
};

bgImg.onload = () => {
  updateOverlay();
  window.addEventListener('resize', updateOverlay);
};

两种方案都能解决你的问题：

• 如果想保留background-image的写法，选方案一，通过JS计算背景图的偏移和尺寸来定位div；
• 如果可以调整HTML结构，方案二更直观，代码维护起来更简单。

这两种方案都能保证在任何分辨率下，div都精准定位在挡风玻璃的位置，同时保持背景图最大化显示的效果。

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