如何用纯CSS让失效图片保留硬编码的宽高比？

这个问题的核心是：当图片加载失败时，浏览器会忽略img标签上的width和height属性，转而使用默认的16x16尺寸，破坏了原本的布局比例。下面给你两种纯CSS解决方案，分别适配现代浏览器和需要兼容旧版本的场景：

方案一：使用aspect-ratio属性（推荐，现代浏览器） #

这是最简单直接的方法，利用CSS的aspect-ratio属性，直接复用img标签上的宽高属性值来强制保持比例：

img {
  max-width: 100%;
  height: auto;
  /* 利用标签上的width和height属性计算宽高比 */
  aspect-ratio: attr(width) / attr(height);
  /* 可选：确保图片内容按比例填充容器，和原效果一致 */
  object-fit: contain;
}

原理说明 #

• aspect-ratio: attr(width)/attr(height)会读取img标签上的width和height属性值，自动计算并强制元素保持该比例，不管图片是否加载成功。
• object-fit: contain保证有效图片在容器内按比例缩放，和你原来的height: auto效果完全一致，不会出现拉伸或裁剪。

这个方案在Chrome 88+、Firefox 89+、Safari 15.4+都能正常工作，覆盖了绝大多数现代浏览器。

方案二：兼容旧浏览器的padding-top技巧（需微调HTML） #

如果需要支持不兼容aspect-ratio的旧浏览器（比如IE或老版本Safari），可以用容器+padding-top百分比的方法，不过需要给每个img包裹一层容器（这是最小的HTML改动，如果你完全不能改HTML，这个方案不适用）：

修改后的HTML #

<div class="img-container">
  <img height="573" width="975" src="https://cdn.sstatic.net/Sites/stackoverflow/company/Img/photos/big/1.jpg?v=17b956bfb68e">
</div>
<p>test</p>
<div class="img-container">
  <img height="573" width="975" src="https://stackoverflow.com/missing-image.png">
</div>
<p>test</p>

对应的CSS #

.img-container {
  max-width: 100%;
  /* 计算比例：573/975*100% ≈ 58.77% */
  padding-top: 58.77%;
  position: relative;
}

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

原理说明 #

• padding-top的百分比是基于父元素宽度计算的，所以58.77%的padding-top会让容器高度始终是宽度的58.77%，完美匹配图片的宽高比。
• 绝对定位的img会填充整个容器，不管图片是否加载，容器都会保持正确的占位尺寸。

效果验证 #

两种方案都能实现：

• 有效图片按比例缩放，保持原有响应式效果
• 失效图片的占位容器保持100%宽度和正确的宽高比，不会变成16x16的小方块，彻底解决布局错乱问题

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