aspect-ratio 能替代 padding-top 实现宽高比，但需满足宽度可推导、无显式高度冲突、盒模型合规三前提；失效主因是隐式约束断裂，如父容器flex未设width、存在height声明、display不合规或CMS注入height:100%。
aspect-ratio 能直接替代 padding-top 百分比垫片，但不是“写了就生效”——它只在宽度可推导、无显式高度冲突、盒模型类型合规的前提下才起作用。
为什么写了 aspect-ratio 容器却没高度
最常被忽略的是「隐式约束」：浏览器需要一个明确的宽度起点，才能按比例反推高度。一旦这个起点被上级样式干扰，整个链路就断了。
-
width或max-width缺失：父容器是flex且子项没设flex-basis或width，宽度无法确定 - 显式写了
height、min-height或max-height：只要存在任一高度声明，aspect-ratio就被完全忽略 - 元素是
display: inline、inline-block（未设width）或伪元素：::before等不生成独立块级盒模型，属性无效 - CMS 或框架组件偷偷加了
height: 100%：<slot>容器、Vue 的<div class="card">常见此类干扰，必须 inspect 上级并清掉
怎么安全写 aspect-ratio 并 fallback 到 padding-top
不能靠 @supports 自动兜底，必须手动叠加、严格顺序。旧浏览器（如 Safari 15.0–15.3、微信 X5 内核）对 aspect-ratio 静默忽略，控制台零提示，页面直接坍缩为 0 高度。
- 先写降级：
.ratio-box { position: relative; width: 100%; padding-top: 56.25%; }（16:9 → 9 ÷ 16 × 100%） - 再覆盖：
@supports (aspect-ratio: 16 / 9) { .ratio-box { padding-top: 0; aspect-ratio: 16 / 9; } }（空格不能省，不能加单位） - 内容层必须用
position: absolute; top: 0; left: 0; width: 100%; height: 100%填满——height: 100%在父高为 auto 时算出来是 0，不可依赖 - 图片类内容务必加
object-fit: cover+width: 100%; height: 100%，否则拉伸变形
aspect-ratio 在 Flex/Grid 中失效的典型场景
它不“自动适应”，而是依赖宽度可推导。Flex 和 Grid 的尺寸计算优先级高于比例约束，容易把 aspect-ratio 挤掉。
立即学习“前端免费学习笔记（深入）”；
- Flex 子项设了
flex: 1但没给flex-basis或min-width: 0：收缩时宽度基准丢失，比例失效 - Grid 列轨道用
auto或min-content：列宽不确定，行高无法锚定，比例链断裂 - 解决方法：列轨道改用
minmax(0, 1fr)，Flex 子项临时加flex-shrink: 0验证是否为此问题 -
aspect-ratio对<video>标签本身无效——Tailwind 的aspect-video类只作用于包裹容器，<video>必须放进去并配absolute inset-0 w-full h-full object-contain
真正难调试的从来不是语法，而是嵌套层级里那些看不见的 height: 100%、flex: 1 或 CMS 注入的样式；aspect-ratio 是个“安静”的属性——它不报错，也不警告，只默默失效。
