aspect-ratio必须作用于外层块级/弹性/网格容器，不能直接写在或上，因其是替换元素，无法触发布局计算；需配合width/max-width、height未声明及object-fit才能生效。
aspect-ratio 能用，但直接写在 <img alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" > 或 <video></video> 上基本等于没写——尤其在 Safari 15.3 及更早版本里，它会彻底被忽略。
为什么 aspect-ratio 写在 <img alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" > 上不生效
<img alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" > 是替换元素（replaced element），它的尺寸由内容原始宽高和浏览器解析逻辑决定，aspect-ratio 在它上面无法触发布局计算。常见现象包括：
- 高度塌陷成 0，只留一条水平线
- 懒加载后容器突然“跳高”，页面抖动
- 在 Flex 容器中比例丢失，
flex-basis覆盖了aspect-ratio - 显式写了
height: auto或height: 100%，导致aspect-ratio被跳过（CSS 优先级规则下，height 声明会阻断 aspect-ratio 的高度推导）
真正起效的写法：必须套一层容器
只有外层块级/弹性/网格子项容器满足三个条件时，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 alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" > 默认拉伸填充，图片糊掉或裁半是常态。
- 加
width: 100%; height: 100%到<img alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" >本身，否则object-fit不触发 -
object-fit: cover：填满，可能裁边；适合封面图 -
object-fit: contain：完整显示，留白；适合证件照 - 别用
fill——就是变形专用属性
安卓 WebView（尤其是 UC、旧版 Samsung Browser）对 object-fit 支持不稳定，真机测试不能跳过。
兼容 Safari 15.3 及更早的降级方案
如果项目仍需支持 macOS Monterey（Safari 15.3）或某些企业内网环境，必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0; - 计算
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
<img alt="HTML怎么让元素固定宽高比_html元素保持固定宽高比方法【避坑】" >设position: absolute; top: 0; left: 0; width: 100%; height: 100%
这个技巧至今在所有浏览器里都稳，但它要求子元素必须绝对定位——一旦忘了加 position: absolute，整个结构就塌了，这点容易被忽略。
