CSS aspect-ratio属性与width声明的差异及显式设置必要性

你提到Chrome中设置图片宽度为100%时，浏览器会根据原图尺寸自动计算宽高比，这没错，但显式声明aspect-ratio依然有不可替代的作用，作者的示例也并非错误，具体原因如下：

• 避免布局偏移（优化CLS）：图片加载完成前，浏览器不知道它的固有尺寸，如果没设置aspect-ratio，页面会在图片加载后突然撑开，造成累积布局偏移（CLS）——这是Core Web Vitals的关键指标之一。显式声明比例后，浏览器会提前为图片预留好对应尺寸的空间，保持布局稳定。

• 强制统一视觉比例：如果你的UI要求所有图片都遵循固定比例（比如示例中的5/3），不管原图是2/1还是其他比例，显式设置aspect-ratio可以让图片按指定比例缩放（配合object-fit: cover或contain还能控制裁剪/适配方式），保证页面视觉风格统一，这也是作者示例的核心目的。

• 处理无固有尺寸的图片：部分图片可能没有携带固有尺寸元数据（比如动态生成的图片、修改过元数据的图片），或是SVG格式（SVG默认没有固定比例，除非内部定义），这种情况下浏览器无法自动计算比例，显式设置aspect-ratio能确保布局正常。

• 兼容性补充（非主要原因）：主流浏览器早就支持根据图片固有尺寸自动计算比例，但aspect-ratio是较新的CSS属性（Chrome 88+、Firefox 89+、Safari 15+），不过针对极旧浏览器的场景，以前常用padding-top技巧模拟比例，现在aspect-ratio是更简洁的替代方案。

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