aspect-ratio必须作用于外层块级/flex/grid容器，不能直接写在或上，因其是替换元素，尺寸由固有宽高决定，无法触发布局计算；生效需同时满足：容器有明确宽度、未声明height、display为block/flex/grid，并配合object-fit与width/height:100%。
aspect-ratio 必须作用于外层容器，写在 <img> 或 <video></video> 上基本无效——这不是 bug，是规范行为。
为什么直接给 <img> 设 aspect-ratio 不生效
<img> 是替换元素（replaced element），其尺寸由 intrinsic 尺寸或显式 width/height 属性决定，aspect-ratio 在它上面无法触发布局计算。实测常见现象包括：
- 高度塌陷为 0，只留一条水平线
- 懒加载后容器突然“跳高”，页面抖动（CLS）
- 在 Flex/Grid 容器中被
flex-basis或grid-template-rows覆盖，比例丢失 - Safari 15.3 及更早版本完全忽略该声明，Chrome 桌面版看似正常但本质回退到 intrinsic 尺寸，不可靠
aspect-ratio 真正起效的三个硬性条件
只有同时满足以下三点，浏览器才会根据比例推导并应用高度：
- 容器必须是块级、Flex 子项或 Grid 子项（如
display: block、display: flex、display: grid） - 容器必须有明确宽度来源：比如
width: 100%、max-width: 600px、flex-basis: 300px - 容器不能声明
height（包括height: auto、height: 100%；CSS 优先级规则下会跳过aspect-ratio）
语法也容易出错：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不触发 - 安卓 WebView（尤其 UC、旧版 Samsung Browser）对
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 输出的元数据
真正起效的路径只有一条：外层块级容器 + 明确宽度来源 + 无 height 声明 + object-fit 配合 + 真机验证旧版 WebView 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
