aspect-ratio仅在宽度可测、高度未锁定时生效，否则浏览器跳过计算；必须配合width/max-width且禁用height声明，作用于块级容器而非img/video等替换元素。
aspect-ratio 不是“设了就生效”的尺寸控制属性，它只在宽度可测、高度未锁定时参与推导——90% 的失效问题都卡在这一步。
为什么写了 aspect-ratio: 16 / 9 却没高度？
浏览器不会凭空算出高度，它需要一个已知的宽度作为计算基准。如果容器宽度为 auto 且父级无约束（比如 display: inline-block 或 Flex 子项未设 flex-basis），或者你显式写了 height: auto、height: 100%，浏览器就认为高度已确定，直接跳过 aspect-ratio。
常见失效组合：
-
aspect-ratio: 16 / 9单独写，没配width或max-width→ 宽度为 0，高度也为 0 -
width: 100%; height: 100%同时存在 →aspect-ratio被完全忽略 -
display: inline或float: left的元素 → 不触发盒模型比例推导 - 用在
<img>或<video>标签上 → 替换元素不支持，必须用外层<div>包裹
怎样写才真正稳定生效？
核心就两条：宽度可测 + 高度未锁定。推荐以下两种安全写法：
立即学习“前端免费学习笔记（深入）”；
-
width: 100%; aspect-ratio: 16 / 9;→ 适合响应式卡片、列表项，随父级变宽，高度自动算出 -
max-width: 400px; aspect-ratio: 4 / 3;→ 更稳妥，width可省略（默认auto仍能触发计算）
Grid/Flex 场景下，只要列轨道或主轴有约束（如 grid-template-columns: 1fr 200px），子项就能基于所在轨道宽度生效；但若子项设了 flex: 0 0 auto 或 align-items: stretch 强行撑高，就会覆盖比例计算。
和 object-fit 配合时容易踩的坑
aspect-ratio 只管容器“框”的比例，不管里面图片怎么铺。漏配 object-fit 或尺寸声明，图片照样拉伸变形或溢出。
-
<img>必须加width: 100%; height: 100%，否则object-fit不触发 -
object-fit: cover最常用，但会裁边；contain保留完整但留白；fill强制拉满，必失真 - 别给
<img>直接设aspect-ratio—— 替换元素不参与布局计算，写了也无效
兼容性与降级方案
Safari 15.3 及更早版本完全忽略 aspect-ratio，Chrome 桌面版看似正常但本质回退到 intrinsic 尺寸，不可靠。若需兼容旧环境，必须 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%
真机测试不能跳过，尤其安卓 WebView（UC、旧版 Samsung Browser）对 object-fit 支持不稳定。别用文件名猜比例——cover-16x9.jpg 不代表就是 16:9。
