实现object-fit:contain图片上元素的固定相对位置与同步缩放

你原来的代码中，.img-container 占满整个视口（100% 宽 + 100vh 高），而图片用 object-fit: contain 会在容器内按比例缩放，导致图片周围出现留白。此时 .overlay 的 top:30%、left:30% 是相对于容器（视口）计算的，而非图片本身，所以无法固定在图片的对应位置。

核心解决思路是：让容器的尺寸完全匹配图片缩放后的尺寸，这样 overlay 的百分比定位就会对应图片的实际位置，同时随图片同步缩放。以下是两种可靠实现方式：

方法1：纯CSS固定比例（已知图片宽高比） #

如果已知图片的宽高比（比如16:9、4:3），可以用 aspect-ratio 直接让容器和图片保持相同比例：

.img-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  /* 替换为你的图片宽高比，例如16:9写16/9，4:3写4/3 */
  aspect-ratio: 16/9;
  margin: 0 auto;
  background-color: antiquewhite;
}

.aspect-ratio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 用cover让图片填满容器，或contain保持完整（需确保容器比例和图片一致） */
  object-fit: cover;
}

.overlay {
  position: absolute;
  /* 这里的百分比完全对应图片的位置 */
  top: 30%;
  left: 30%;
  /* 用百分比单位让元素随图片同步缩放 */
  font-size: 2%;
  padding: 0.5% 1%;
}

HTML保持不变：

<div class="img-container">
  <img src="img.jpg" class="aspect-ratio-img" alt="Your Image">
  <div class="overlay">Element</div>
</div>

兼容性说明 #

aspect-ratio 支持现代浏览器（Chrome 88+、Firefox 89+、Safari 15+），如果需要兼容旧浏览器，改用 padding-top 实现比例：

.img-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  height: 0;
  /* 计算方式：(高/宽)*100%，16:9就是9/16*100%=56.25% */
  padding-top: 56.25%;
  margin: 0 auto;
  background-color: antiquewhite;
}

方法2：JS动态适配未知比例图片 #

如果图片比例不确定，用JS获取图片原生尺寸，动态设置容器的宽高比：

.img-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;
  background-color: antiquewhite;
}

.aspect-ratio-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 30%;
  left: 30%;
  font-size: 2%;
  padding: 0.5% 1%;
}

const img = document.querySelector('.aspect-ratio-img');
// 确保图片加载完成后计算比例
img.onload = function() {
  const ratio = img.naturalHeight / img.naturalWidth;
  document.querySelector('.img-container').style.aspectRatio = `1/${ratio}`;
};
// 处理图片已缓存的情况
if (img.complete) img.onload();

原理说明 #

• 容器通过 aspect-ratio 或 padding-top 强制和图片保持相同宽高比，容器的尺寸始终是图片在视口内按比例缩放后的实际尺寸
• overlay 相对于容器绝对定位，百分比单位的 top/left 和尺寸会随容器（即图片）同步缩放，完美固定在图片的对应位置

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