padding-top 百分比能实现固定宽高比，因其值按父容器宽度计算而非高度；配合 absolute 定位内容可构建响应式比例盒子，但现代推荐使用原生 aspect-ratio 属性。
用 padding-top 百分比实现固定比例盒子，核心是利用 padding 的百分比值相对于 ** 父容器宽度 ** 计算的特性，而非高度——这是关键。
为什么 padding-top 百分比能固定宽高比
在 CSS 中，padding-top 和 padding-bottom 的百分比值，始终以 ** 父元素的 width** 为基准计算（W3C 规范定义），而不是 height。这就让我们能“借宽控高”：比如设 padding-top: 56.25%，当父宽是 400px，内边距顶部就是 225px，刚好构成 16:9（400×0.5625=225）的垂直空间。
经典写法：padding-top + absolute 定位内容
由于 padding 本身不占内容区，需把实际内容用 position: absolute 塞进这个“留白区域”里：
- 父容器设
position: relative - 给父容器设置
padding-top: [目标比例值]%（如 75% → 4:3，56.25% → 16:9） - 子元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%
更现代简洁的替代方案（推荐优先考虑）
虽然 padding 技巧有效，但已有更直观、语义清晰的方式：
立即学习 “ 前端免费学习笔记（深入）”；
- aspect-ratio 属性 ：直接写
aspect-ratio: 16 / 9，现代 浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持，无需 hack - object-fit + img/video：对媒体元素，配合
width: 100%; aspect-ratio: 16/9; object-fit: cover更稳妥 - grid 或 flex 配合 min-block-size：在支持环境下可用
min-block-size: 56.25vw等视口单位模拟，但兼容性略弱于 aspect-ratio
注意事项和常见坑
用 padding-top 方案时要注意：
- 父容器必须有明确宽度（不能是
display: inline或未设宽的 flex item） - 如果父容器宽为 0（比如未触发 BFC 或被压缩），padding 计算结果也为 0
- 内容 绝对定位 后，父容器高度完全依赖 padding，内部其他流式内容会被忽略——所以它适合“单内容占满”的场景（如封面图、视频容器）
- 响应式下，比例依然成立，因为百分比始终随父宽动态变化
基本上就这些。padding-top 百分比是个经典技巧，理解原理比死记代码重要；而新项目中，优先用 aspect-ratio 会更干净、可维护。
