直接给 img 或 video 加 aspect-ratio 会失效，因其是替换元素，自带固有尺寸，与 CSS aspect-ratio 冲突；Safari 可能渲染空白，Chrome 可能拉伸变形；正确做法是将 aspect-ratio 应用于外层容器并让子元素填满。
为什么直接给 img 或 video 加 aspect-ratio 会失效
因为它们是替换元素，自带固有尺寸（intrinsic size），和 aspect-ratio 冲突。Safari 可能渲染空白，Chrome 可能拉伸变形——尤其当没设 width 或 height 时。规范没强制要求替换元素服从该属性，所以浏览器行为不一致。正确做法永远是把比例逻辑放在外层容器上，再让子元素填满。
::before 撑高容器的硬性前提条件
不是加了伪元素就自动生效，必须同时满足：
-
父容器必须设position: relative，否则::before的position: 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 及更早 Safari 中 ::before + padding-top 失效怎么办
这不是你代码写错了，而是旧版 WebKit 渲染引擎 Bug：百分比 padding 可能被忽略或算为 0。
- 先检查父容器是否被
flex: 1或width: auto导致“无明确宽度”——加min-width: 0或显式width: 100% - 避免在
::before上同时用float和position: absolute，二者冲突 - 可临时 fallback 到
aspect-ratio（Safari 15.4+ 支持），或改用vw单位计算高度（如height: calc(100vw * 9 / 16)）
用 background-image 还是 ::after？别绕远路
绝大多数带背景图的响应式容器，根本不需要伪元素。直接在容器上设：
立即学习“前端免费学习笔记（深入）”；
-
background-image+background-size: cover+background-position: center - 配合
aspect-ratio: 16/9（现代浏览器）或padding-bottomfallback
::after 只在需要独立缩放、遮罩、错位的装饰层时才有意义，比如渐变蒙版、徽章图标、或背景与内容分离的三重布局。多一层伪元素，就多一重定位控制、z-index 烦恼和渲染开销。
最常被忽略的一点：伪元素的 padding-top 是按父容器宽度算的，但这个“父容器宽度”本身得能被浏览器明确读出来——flex/grid 容器里没加 min-width: 0，它就算不出来。
