aspect-ratio 必须写在父容器上而非 <img> 标签内，因 <img> 是替换元素、默认 inline 且无固有尺寸，浏览器忽略其 aspect-ratio；需父容器为 block/flex/grid、未脱离文档流、未设 height，再配合 width:100% 和 object-fit 才生效。
aspect-ratio 能用，但直接写在 <img> 上基本无效——现代浏览器会静默忽略，高度照样塌陷。
为什么aspect-ratio必须写在父容器上
因为 <img> 是替换元素，默认 display: inline，且加载前没有固有尺寸。浏览器把 aspect-ratio 当作「盒模型空间预留指令」，而替换元素不参与该层计算。Chrome、Safari 会直接标 aspect-ratio: 16 / 9 为 invalid，DevTools 里都看不到生效。
真正起作用的是块级容器，比如 <div class="img-wrap">，它需要满足三个条件：
-
display是block、flex或grid（不能是inline或inline-block） - 没被
position: absolute或float脱离文档流 - 没设
height（哪怕height: auto都可能干扰推导）
aspect-ratio写对了却还是塌陷？检查这三件事
常见问题不是属性拼错，而是组合缺失：
立即学习“前端免费学习笔记（深入）”；
- 漏了
width: 100%（或max-width: 100%）：没有宽度基准，aspect-ratio就没法算出高度 - 同时写了
height: 200px这类固定值：浏览器直接丢弃aspect-ratio，不报错也不警告 - 父容器用了
align-items: stretch（Flex 默认行为）：会强行撑高子项，覆盖比例计算；加align-self: center可修复
最小可靠组合是：.img-wrap { width: 100%; aspect-ratio: 16 / 9; }.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
移动端兼容性与降级方案
iOS Safari 15.4+、Chrome Android 100+、Firefox Android 102+ 原生支持 aspect-ratio；低于这些版本（比如 iOS 15.2）会完全忽略，导致容器高度为 0。
必须用 @supports (aspect-ratio: 1/1) 包裹主逻辑，并提供 fallback：
- 老版本兜底推荐用
padding-top百分比（如 16:9 →padding-top: 56.25%），配合position: relative+absolute定位填满 - 别只测最新 Chrome，真机连 iOS 15.2 都得跑一遍
- 微信安卓版部分仍用 X5 内核（不支持
aspect-ratio），不能只靠 Can I Use 数据
object-fit 和 aspect-ratio 必须一起用
aspect-ratio 只管容器盒子的宽高关系，不管里面图片怎么铺。如果只设容器比例，但 img 没加 object-fit，图片很可能拉伸或留白。
- 要填满不裁剪：用
object-fit: contain，并配background-color防白边 - 要填满且允许裁剪：用
object-fit: cover，这是封面图最常用组合 - 别混淆层级：容器比例 ≠ 图片渲染方式，二者缺一不可
服务端返回不同比例图时，别写死 aspect-ratio: 16 / 9 —— 改用 HTML 的 data-aspect 属性传值，再通过 CSS 自定义属性动态注入。
