如何让Chrome在图片加载时遵循其固有尺寸及约束规则？

问题背景 #

需要为图片设置以下严格尺寸约束：

• 无论图片固有尺寸如何，渲染尺寸不得超出指定最大尺寸，也不得小于最小尺寸
• 在满足尺寸约束的前提下，优先遵循图片宽高比；若无法同时满足约束与宽高比，使用object-fit: cover进行裁剪
• 已知图片固有尺寸，可提前为元素设置width/height属性

现有两种方案均存在问题：

方案1：固定width/height属性 #

<img src="foo" width="30" height="80" />

img {
  display: block;
  background: gray;
  max-height: 60px;
  max-width: 100px;
  object-fit: cover;
}

问题：即使图片可通过等比缩小满足所有约束，仍会被max-height强制裁剪。例如固有尺寸为30×80的图片，最终渲染尺寸为30×60，未按宽高比等比缩小。

方案2：width/height设为auto #

img {
  display: block;
  background: gray;
  width: auto;
  height: auto;
  max-height: 60px;
  max-width: 100px;
  object-fit: cover;
}

问题：Chrome在图片加载过程中会忽略固有尺寸，导致布局偏移；加载失败时无此问题，且Firefox全程表现正常。

可靠解决方案 #

要同时满足加载过程尺寸稳定、遵循宽高比、符合尺寸约束三个要求，推荐使用容器占位+绝对定位图片的方案：

实现代码 #

HTML

<div class="img-container" style="--width:30; --height:80;">
  <img src="foo" alt="" />
</div>

CSS

.img-container {
  display: block;
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 60px;
  aspect-ratio: var(--width)/var(--height);
  background: gray;
  position: relative;
  overflow: hidden;
}

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

方案优势 #

1. 尺寸稳定无偏移：容器会根据设定的宽高比和尺寸约束提前占据正确空间，图片加载过程中不会触发布局变动
2. 严格遵循约束：容器自动计算符合要求的最大尺寸，图片通过object-fit: cover填充，既保证宽高比，又在必要时裁剪
3. 跨浏览器兼容：Chrome、Firefox等主流浏览器表现一致，无兼容性问题

替代方案（实验性） #

如果不想额外添加容器，可利用aspect-ratio结合自定义属性实现，但需注意兼容性：

<img src="foo" width="30" height="80" />

img {
  display: block;
  background: gray;
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 60px;
  aspect-ratio: 30/80; /* 直接写入固有宽高比 */
  object-fit: cover;
}

注：若需动态适配不同图片，可通过JS提前计算宽高比并设置到元素样式中。

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