能做出可靠自适应长宽比容器，需父容器有明确宽度、不设height、内容用position:absolute填满；::before的padding-top百分比按父宽计算，如16:9为56.25%。
直接用 ::before + padding-top 百分比能做出可靠自适应长宽比容器，但必须满足三个硬性条件：父容器有明确宽度、不设 height、内容用 position: absolute 填满；漏掉任一，容器就塌或错位。
为什么 ::before 的 padding-top 能撑高容器
因为 ::before 是伪元素，只要设了 display: block 或 table，它的 padding-top 百分比就按父容器宽度计算——和普通元素一致。16:9 就写 padding-top: 56.25%（即 9 / 16 * 100），4:3 就写 padding-top: 75%。它不依赖子元素存在，也不改动 HTML 结构，纯靠盒模型“占位”推高容器高度。
常见错误现象：::before 完全没效果、高度为 0、父容器被撑得过高或内容溢出。
- 父容器未设
width（比如只写了max-width但没配width: 100%）→ 百分比失去参照，padding-top算成 0 - 父容器写了
height: auto或具体值 → 直接压制伪元素撑高行为 -
::before没加display: block→ 默认是inline，padding-top不参与盒模型高度计算
标准写法里三个角色缺一不可
这是经过 Safari 15.4+、Chrome 120、Firefox 115 和安卓 WebView 多端验证的最小可行组合：
立即学习“前端免费学习笔记（深入）”；
.aspect-16x9 {
position: relative;
width: 100%;
}
.aspect-16x9::before {
content: "";
display: block;
padding-top: 56.25%;
}
.aspect-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}关键点说明：
-
position: relative必须加在父容器上，否则absolute子元素会向上找定位上下文，可能脱离预期范围 -
::before只负责撑高，不设width、height、margin，也不用float（和position: absolute冲突） - 真实内容（如
<img>、<video>）必须用position: absolute填满，不能靠flex居中或margin: auto，否则在旧 WebView 中会失效
iOS Safari 和微信 X5 内核中的兼容性陷阱
Safari 15.0–15.3 和部分安卓 WebView（如微信 X5 内核）会静默忽略 ::before 的 padding-top 百分比，表现为容器高度坍缩、内容堆叠在顶部。这不是 bug，是早期实现未严格遵循规范。
排查与修复建议：
- 真机测试 Safari 15.2，别信 Can I Use 的绿色标记——它只标“支持”，不标“是否静默忽略”
- 检查父容器是否被
flex: 1或width: auto导致“无明确宽度”，加min-width: 0或显式width: 100% - 某些老版 Safari 对
content: ""解析异常，可试content: "\00a0"（不间断空格） - 若仍不稳定，降级用
padding-bottom+height: 0组合（原理相同，但兼容性略好）
最易被忽略的一点：这个技巧只控制容器“框”的比例，不管里面内容怎么铺。图片要填满且不失真，还得额外加 object-fit: cover 和 display: block（防底部空白），否则比例对了，图却拉伸或留白。
