aspect-ratio不能直接写在或上，因二者是替换元素，浏览器优先尊重其固有宽高比，该属性仅对块级/弹性/网格容器生效，且需满足有明确宽度、未设height、配合object-fit与100%宽高才有效。
aspect-ratio 不能直接写在 <img> 或 <video></video> 标签上——它只对容器生效，且必须满足三个硬性条件，否则在 Safari 15.3 及更早版本里等于没写。
为什么直接给 <img> 写 aspect-ratio 没用
<img> 是替换元素（replaced element），浏览器按其 intrinsic 尺寸和 content box 规则渲染，aspect-ratio 在它上面无法触发布局高度推导。常见现象包括：
- 高度塌陷为
0px，只留一条细线 - 懒加载后容器突然“跳高”，引发 CLS（布局偏移）
- 在
display: flex容器中被flex-basis覆盖，比例丢失 - 写了
height: auto或height: 100%，CSS 优先级规则下aspect-ratio被跳过
真正起效的容器写法（<div> / <code><figure></figure>）
必须同时满足以下三点，aspect-ratio 才会计算并应用高度：
- 容器设为块级、弹性或网格子项：比如
display: block、display: flex或display: grid - 有明确宽度来源：如
width: 100%、max-width: 600px、flex-basis: 300px - 不能声明任何
height（含height: auto）
语法也得严格：aspect-ratio: 16 / 9（斜杠前后各一个空格），不能写成 16/9、16:9 或 16/9px。
object-fit 不是可选，是必配项
aspect-ratio 只管容器“该多高”，不管里面的内容怎么铺。不配 object-fit，<img> 默认拉伸填充，图片糊掉或裁半是常态：
-
object-fit: cover：填满容器，可能裁边；适合封面图、海报 -
object-fit: contain：完整显示，留白；适合证件照、图标
且必须给 <img> 加 width: 100%; height: 100%，否则 object-fit 不触发。
兼容 Safari 15.3 及更早的降级方案
如果项目仍需支持 macOS Monterey（Safari 15.3）或某些企业内网环境，aspect-ratio 必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0 -
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100%
别用文件名猜比例（cover-16x9.jpg 不代表就是 16:9），要用真实尺寸或 CMS 输出的元数据——这点最容易被忽略，一错就全盘失效。
