用 padding-top 而不是 height 实现响应式宽高比，因其百分比基于父宽计算，而 height 百分比在无明确父高时无效；需配合 position: relative/absolute、content: "" 伪元素及正确 box-sizing 使用。
为什么用 padding-top 而不是 height 做响应式宽高比
因为 padding-top 的百分比值是相对于父容器宽度计算的，而 height 的百分比在无明确高度父级时无效。想让容器随宽度缩放保持 16:9 或 4:3，必须靠这个“宽度驱动高度”的特性。
常见错误现象：height: 56.25% 没效果、容器塌陷成一条线、子元素溢出或错位。
- 父容器必须有明确
width（比如width: 100%），否则padding-top百分比失去参照 - 不能给容器设
height，否则会覆盖 padding 占位效果 - 子内容需用
position: absolute填满，否则 padding 留白在顶部，内容沉在下方
::before 伪元素 + padding-top 的最小可行写法
伪元素不占文档流，适合纯占位；配合 position: relative 容器和 position: absolute 内容，能干净解耦尺寸与内容布局。
典型使用场景：响应式视频封面、卡片背景图容器、图表画布占位。
立即学习“前端免费学习笔记（深入）”；
.aspect-ratio-16x9 {
position: relative;
width: 100%;
}
.aspect-ratio-16x9::before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.aspect-ratio-16x9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}-
::before必须设content: ""，否则不渲染 - 不要给
::before设height或width，它只负责撑开父容器高度 - 子元素选择器用
> *更安全，避免误选嵌套的深层节点
不同宽高比的 padding-top 值怎么算
公式就一个：padding-top: (height / width) * 100%。别背数字，现场除一下更快也更少出错。
常见参数差异：
- 4:3 →
padding-top: 75%（3 ÷ 4 = 0.75） - 1:1 →
padding-top: 100% - 21:9（超宽屏）→
padding-top: 42.857%（9 ÷ 21 ≈ 0.42857） - 移动端常用 3:4（竖版视频）→
padding-top: 133.33%（4 ÷ 3 ≈ 1.3333）
注意：CSS 不支持 calc() 在 padding-top 里直接写 calc(9 / 16 * 100%)，必须手动算好。
Flex/Grid 布局下 padding-top 占位失效怎么办
当父容器是 display: flex 或 display: grid 时，::before 可能被压缩为 0 高度——因为 flex/grid 项默认按内容尺寸收缩，而空伪元素没内容。
性能与兼容性影响：这不是 bug，是规范行为。IE11 支持 ::before 占位，但部分老安卓 WebView 对 padding-top 百分比解析不准。
- 加
flex-shrink: 0到伪元素上，强制不压缩 - 或者改用
min-height+aspect-ratio（现代方案，但 Safari 15.4+ 才稳定支持） - 更稳妥的降级：用 JS 监听 resize 计算并设内联
style.height，仅对不支持伪元素占位的环境启用
真正容易被忽略的是：伪元素占位依赖父容器的 box-sizing。如果父级设了 box-sizing: border-box 且有 padding，会影响实际可用宽度，进而让 padding-top 计算偏移。要么统一用 box-sizing: content-box，要么把父级 padding 拆到更外层。
