aspect-ratio 在 safari 15.0–15.3 等旧版浏览器中静默失效致高度坍缩为 0，需配合 padding-top 百分比 fallback 并严格满足宽度基准、position 和 flex/grid 约束条件。
aspect-ratio 能直接用，但只在 Chrome 88+、Firefox 89+、Safari 15.4+ 和 Edge 101+ 中生效；Safari 15.0–15.3 会静默忽略，容器高度坍缩为 0，线上出问题几乎不报错，极难定位。
为什么写了 aspect-ratio 容器却没高度
这是最常踩的“黑盒”坑——尤其在真机 Safari 15.0–15.3 或微信 X5 内核里，页面看起来空白或错位，控制台连 warning 都没有。
- 漏了
width或max-width：没有宽度基准，aspect-ratio根本无法推导高度 - 父容器是
display: flex且子项没设flex-basis或width，导致宽度未定，比例失效 - 同时写了
height: 200px（或min-height）：只要显式设了高度，aspect-ratio就被浏览器完全丢弃 - 元素是
display: inline或伪元素（如::before）：这些不生成独立盒模型，aspect-ratio不起作用
怎么安全写 aspect-ratio 并 fallback 到 padding-top
不能只靠 @supports (aspect-ratio: 1/1)，它在不支持的浏览器里整块跳过，不会触发降级逻辑。必须手动叠加 fallback，且顺序和写法极其关键：
- 先写
aspect-ratio: 16 / 9（空格不能省，不能加单位或引号），再写padding-top: 56.25%（16:9 → 9 ÷ 16 × 100%） - 外层容器必须设
position: relative，否则position: absolute子元素会脱出上下文 - 子内容需用
position: absolute; top: 0; left: 0; width: 100%; height: 100%填满，height: 100%在父高为 auto 时计算结果是 0，不可依赖 - 图片内容务必加
object-fit: cover，并配width: 100%; height: 100%，否则拉伸变形
padding-top 百分比方案的硬约束条件
这个方案稳定，但每一条都错不得：
-
padding-top的百分比始终基于父容器宽度计算，不是高度——这点常被反向理解 - 父容器不能设
height，否则会压制padding撑高的效果 - 若父容器是 flex 子项，需加
min-width: 0或显式width: 100%，防止 flex shrink 导致宽度基准丢失 - 在
grid-template-columns: 1fr下，若列宽未定，padding-top计算可能异常，建议改用minmax(0, 1fr)
在 Flex/Grid 中 aspect-ratio 失效的典型场景
它不是“自动生效”的属性，而是依赖明确的宽度来源推算高度：
- Flex 容器中，子项设了
align-self: stretch（默认），但没给flex-basis或width，浏览器无法确定宽度起点 - Grid 容器中，列轨道用
auto或min-content，行高就无法锚定列宽，比例链断裂 - 子项同时有
height: 0和padding-top：某些旧版内核会因高度冲突导致撑高失败 - 用
container queries替代 padding？目前不行——@container还不能触发基于容器宽的百分比计算
aspect-ratio 的静默忽略没有 fallback 机制，你得靠真机测试确认，不能只信 Can I Use 的绿色标记。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
