直接给 img 或 video 加 aspect-ratio 会出问题，因其是替换元素，自带固有宽高，与 intrinsic size 冲突，导致 safari 渲染空白、chrome 拉伸变形；正确做法是将 aspect-ratio 或等效方案（如 ::before + padding-top）应用于外层容器，并满足 position: relative、content: ""、display: block 等前提条件。
为什么直接给 img 或 video 加 aspect-ratio 会出问题
因为 img 和 video 是替换元素，自带固有宽高；直接写 aspect-ratio: 16/9 会和 intrinsic size 冲突。Safari 可能渲染空白，Chrome 可能拉伸变形——尤其在没设 width 或 height 时。浏览器行为不一致，本质是规范未强制要求替换元素必须服从 aspect-ratio。正确做法永远是把 aspect-ratio（或等效方案）放在外层容器上，再让子元素填满。
::before 撑高容器的硬性前提条件
用 ::before 实现宽高比，不是加了就生效，必须同时满足几个关键约束：
-
.container必须设position: relative，否则::before无法作为定位上下文，absolute子元素会找错父级 -
::before必须有content: ""+display: block+padding-top: 56.25%（以 16:9 为例） - 父容器**不能设固定
height**，否则会压制伪元素撑高的效果 - 真实内容（如
img）必须用position: absolute填满，且显式加object-fit: cover，否则图片可能溢出或留白 - 若父容器在
flex或grid中，需确保其宽度可被明确解析——加min-width: 0或width: 100%，否则百分比padding计算失效
iOS 15.3 及更早版本中 ::before + padding-top 失效怎么办
部分旧版 Safari 和安卓 WebView 对伪元素的百分比 padding 支持不完整，padding-top 可能被忽略或算为 0。这不是你代码写错了，而是渲染引擎 Bug：
- 先检查父容器是否被
flex: 1或width: auto导致“无明确宽度”——加min-width: 0或显式width: 100% - 避免在
::before上同时用float和position: absolute，二者冲突 - 某些老 Safari 对
content: ""解析异常，可试content: "\00a0"（不间断空格）触发渲染 - 若仍不行，降级用
padding-bottom替代padding-top，原理相同但兼容性略好
和现代 aspect-ratio 混用时容易踩的坑
现在主流浏览器都支持 aspect-ratio，但若你还在用 ::before fallback，就得小心叠加冲突：
- 别对同一个容器既加 Bootstrap 的
ratio类又手动写::before——会造成双重占位、高度翻倍 - 若子元素是
iframe，Bootstrap 要求加position-absolute top-0 start-0 w-100 h-100，这和::before方案里position: absolute的逻辑本质相同，必须二选一，不能共存 - 自定义比例（如
21/9）时，aspect-ratio用--bs-aspect-ratio: 21/9，而::before得手动算padding-top: 42.857%（9 / 21 * 100%），数值易错，建议写个注释说明来源
真正难的不是写对一次，而是当容器嵌套多层、又混用框架类名和自定义样式时，哪个规则在起作用、哪个被覆盖、哪个被忽略——这时候 inspect 元素看 computed height 和 padding 才是最可靠的判断方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
