safari 15.3及更早版本不支持aspect-ratio属性，会静默丢弃该声明导致容器高度为0；需用::before+padding-top伪元素方案fallback，并确保父容器有明确宽度、设position:relative，子内容用position:absolute填满。
为什么直接写 aspect-ratio 在 Safari 15.3 及更早版本里会失效
写了 aspect-ratio: 16 / 9 却发现容器高度为 0，页面空白或错位，控制台毫无提示——这是 Safari 15.0–15.3 和微信 X5 内核的典型静默失效。它不报错、不警告，只悄悄丢弃该声明，导致盒模型失去高度基准。
真正生效的浏览器版本是：Chrome 88+、Firefox 89+、Safari 15.4+、Edge 101+。低于这些版本时，aspect-ratio 彻底不参与计算，你得靠 fallback。
- 别依赖 DevTools 的“Computed”面板判断是否生效——它可能显示已解析，但渲染层已跳过
- 真机测试必须覆盖 iOS 15.3 及更早（尤其企业微信、钉钉内嵌页）
- 用
border: 1px solid red快速验证容器是否真有高度，比看 background 更可靠
::before + padding-top 的最小可行写法
这个方案本质是用伪元素占位，把高度“算”出来：因为 padding-top 的百分比始终基于父容器宽度，而非高度，所以能绕过 height 百分比无效的问题。
关键约束不能漏：
-
.container必须设position: relative，否则::before无法锚定 -
::before必须有content: ""+display: block+padding-top: 56.25%（16:9） - 容器本身不能设
height或min-height，否则会压制 padding 占位效果 - 子内容必须用
position: absolute; inset: 0填满，否则留白在顶部，内容沉底
示例：
.ratio-16x9 {
position: relative;
width: 100%;
}
.ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 * 100% */
}
.ratio-16x9 > * {
position: absolute;
inset: 0;
}
为什么不能直接给 <img> 或 <video></video> 加 aspect-ratio
替换元素（replaced element）自带固有宽高，和 aspect-ratio 冲突。Safari 可能渲染空白，Chrome 可能拉伸变形，行为不一致。
正确做法永远是：把 aspect-ratio 或伪元素方案套在外层容器上，再让子元素填满。
- 图片用
<img>时，外层容器设aspect-ratio，<img>设width: 100%; height: 100%; object-fit: cover - 背景图用
background-image时，直接挂载在容器上，配background-size: cover，比伪元素更轻量 - 若用
::before承载背景图，必须加background-size: cover，但它受父容器尺寸约束，不是自身尺寸
容易被忽略的 flex / grid 场景坑
在 display: flex 容器里，子项没设 flex-basis 或显式 width，会导致伪元素的 padding-top 失去宽度基准——算出来的百分比是 0。
同样，在 grid 布局中，如果容器没设 inline-size（如 width 或 min-inline-size），padding-top 也会失效。
- Flex 子项要加
flex: 0 0 auto或width: 0+min-width: 100%来触发宽度计算 - Grid 项需确保父容器有明确 inline-size，比如
width: 100%或grid-template-columns: 1fr - Bootstrap 5 的
ratio类已基于aspect-ratio，别和手写的::before方案混用，否则高度翻倍
最麻烦的点在于：问题只在特定组合下出现，且没有错误日志——你得盯着渲染结果，逐层检查父容器的 width 是否真的被计算出来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
