CSS：如何让背景及外层div适配object-fit缩放后的图片尺寸？

针对你遇到的问题，这里提供两种可行方案：

方案一：放弃强制元素比例，让图片自然缩放（纯CSS，满足需求） #

如果你不需要强制容器保持7/5的固定比例，只是希望图片在不超过500px宽、且符合7/5比例上限的范围内自然显示，同时背景和外层容器适配图片实际尺寸，可以这样写：

<div style="display: inline-block; background-color: orange;">
  <img style="max-width: 500px; max-height: calc(500px * 5/7);" src="/images/GqZ8FEkFV-s.webp" />
</div>

原理： #

• 外层div用inline-block，宽度会自动跟随内部img的实际宽度
• 给img设置max-width:500px限制最大宽度，max-height:calc(500px * 5/7)限制最大高度（对应7/5比例的上限）
• 图片会按自身原始比例缩放，不会超出上述尺寸限制，此时img元素的尺寸就是图片实际显示的尺寸，外层div和背景色都会完美适配这个尺寸

方案二：强制7/5比例，用JS动态调整尺寸（精确满足比例要求） #

如果必须保留7/5的强制比例，同时让背景和外层容器适配图片实际显示尺寸，需要用JS计算图片缩放后的实际尺寸，再调整容器和元素的样式：

<div id="img-container" style="background-color: orange; display: inline-block;"></div>

<script>
const img = new Image();
img.src = '/images/GqZ8FEkFV-s.webp';
img.onload = function() {
  const maxWidth = 500;
  const targetRatio = 7/5;
  const imgRatio = img.width / img.height;
  
  let displayWidth, displayHeight;
  if (imgRatio > targetRatio) {
    // 图片比目标比例宽，按高度限制计算
    displayHeight = maxWidth / targetRatio;
    displayWidth = displayHeight * imgRatio;
    if (displayWidth > maxWidth) {
      displayWidth = maxWidth;
      displayHeight = displayWidth / targetRatio;
    }
  } else {
    // 图片比目标比例高，按宽度限制计算
    displayWidth = maxWidth;
    displayHeight = displayWidth / targetRatio;
    if (displayHeight > maxWidth / targetRatio) {
      displayHeight = maxWidth / targetRatio;
      displayWidth = displayHeight * imgRatio;
    }
  }
  
  // 设置图片尺寸
  img.style.width = `${displayWidth}px`;
  img.style.height = `${displayHeight}px`;
  // 把图片加入容器
  document.getElementById('img-container').appendChild(img);
};
</script>

原理： #

• 图片加载完成后，计算其原始宽高比与目标7/5比例的关系
• 根据比例关系计算图片在不超过500px宽、且符合7/5比例下的实际显示尺寸
• 动态设置图片的宽高，外层容器会自动适配图片尺寸，背景色也只会覆盖图片区域

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