如何让使用object-fit:contain缩放的图片子div相对图片定位？

你当前的overlay是相对于container（视口尺寸）定位的，但因为img使用了object-fit: contain，图片实际显示的内容区域与container尺寸不匹配，导致定位不符合预期。以下是两种可行的修复方案：

方案一：纯CSS调整结构（推荐） #

通过给图片添加自适应尺寸的容器，让overlay以图片实际显示尺寸为定位基准：

修改后的HTML #

<div class="container">
  <div class="img-wrapper">
    <img src="example.jpg">
    <div class="overlay"></div>
  </div>
</div>

修改后的CSS #

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-wrapper {
  position: relative;
  display: inline-block;
}

img {
  max-width: 100vw;
  max-height: 100vh;
}

.overlay {
  position: absolute;
  border: 2px solid red;
  top: 10%;
  bottom: 10%;
  left: 20%;
  right: 20%;
}

原理说明

• img-wrapper采用inline-block，会自动收缩至图片的实际显示尺寸（img通过max-width/max-height自适应缩放，无固定宽高）。
• 将img-wrapper设为position: relative后，overlay的绝对定位会以这个容器为基准，此时top:10%等百分比值会基于图片的尺寸计算，完全符合需求。

方案二：JavaScript动态计算（保留原img样式） #

如果必须保留img的width:100vw、height:100vh和object-fit: contain，可以通过JavaScript计算图片内容的实际位置和尺寸，动态调整overlay：

保留原HTML结构 #

<div class="container">
  <img src="example.jpg">
  <div class="overlay"></div>
</div>

调整后的CSS #

.container {
  position: relative;
}

img {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.overlay {
  position: absolute;
  border: 2px solid red;
  /* 移除原有的top/bottom/left/right，由JS动态设置 */
}

JavaScript代码 #

const img = document.querySelector('img');
const overlay = document.querySelector('.overlay');

function updateOverlay() {
  const imgW = img.offsetWidth;
  const imgH = img.offsetHeight;
  const naturalW = img.naturalWidth;
  const naturalH = img.naturalHeight;

  let contentW, contentH, offsetX, offsetY;

  if (naturalW / naturalH > imgW / imgH) {
    // 宽屏图片：高度填满视口，宽度居中
    contentH = imgH;
    contentW = imgH * (naturalW / naturalH);
    offsetX = (imgW - contentW) / 2;
    offsetY = 0;
  } else {
    // 竖屏图片：宽度填满视口，高度居中
    contentW = imgW;
    contentH = imgW * (naturalH / naturalW);
    offsetY = (imgH - contentH) / 2;
    offsetX = 0;
  }

  // 设置overlay的位置和尺寸
  overlay.style.left = `${offsetX + contentW * 0.2}px`;
  overlay.style.right = `${imgW - (offsetX + contentW * 0.8)}px`;
  overlay.style.top = `${offsetY + contentH * 0.1}px`;
  overlay.style.bottom = `${imgH - (offsetY + contentH * 0.9)}px`;
}

// 页面加载和窗口 resize 时更新
window.addEventListener('load', updateOverlay);
window.addEventListener('resize', updateOverlay);

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