不能直接给 img 或 video 加 aspect-ratio，因其为替换元素，固有宽高会与 aspect-ratio 冲突，导致 safari 渲染空白、chrome 拉伸变形；应将 aspect-ratio 应用于外层容器，子元素填满。
为什么不能直接给 img 或 video 加 aspect-ratio
因为 img 和 video 是替换元素，自带固有宽高；直接写 aspect-ratio: 16/9 会和 intrinsic size 冲突，Safari 可能渲染空白，Chrome 可能拉伸变形。浏览器行为不一致，尤其在没设 width 或 height 时。正确做法永远是把 aspect-ratio 放在外层容器上，再让子元素填满。
::before 实现纵横比的关键约束条件
用 ::before 撑高容器本质是复刻旧式 padding-top 黑科技，但更无侵入。它可行的前提很具体：
-
.container必须设position: relative，否则::before定位失效 -
::before必须有content: ""+display: block+padding-top: 56.25%（对应 16:9） - 父容器**不能设固定
height**，否则会压制伪元素撑高效果 - 真实内容（如
img）必须用position: absolute填满，且显式加object-fit: cover - 移动端 iOS 15.3 及更早版本可能忽略
::before的百分比padding，可改用content: "\00a0"触发渲染
兼容旧浏览器的 fallback 写法（::before + padding-top）
现代浏览器支持 aspect-ratio，但若需兼容 Safari 15.3 之前或安卓 WebView，::before 仍是可靠 fallback。标准组合如下：
.ratio-16x9 {
position: relative;
width: 100%;
}
.ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 * 100% */
}
.ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
注意：padding-top 百分比始终按父容器宽度计算，所以父容器必须有明确宽度（比如设了 min-width: 0 或 width: 100%），否则在 flex 子项里可能失效。
和 Bootstrap 5 ratio 类混用时的坑
Bootstrap 5 的 ratio 类本身已基于 aspect-ratio，但如果你在它的容器里再套一层 ::before 占位，容易叠加出错：
- 别对同一个容器既加
ratio类又手动写::before—— 会造成双重占位、高度翻倍 - 若子元素是
iframe，Bootstrap 要求加position-absolute top-0 start-0 w-100 h-100，这和::before方案里position: absolute的逻辑冲突，必须二选一 - 自定义比例（如
21/9）时，Bootstrap 用--bs-aspect-ratio: 21/9，而::before方案得手动算padding-top: 42.857%（9 / 21 * 100%），数值易错
真正需要关注的不是“怎么写”，而是“在哪一层控制尺寸”——所有方案都依赖外层容器先占位，否则图片加载瞬间就会引发布局抖动。这点容易被忽略，但直接影响首屏体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
