padding-top百分比能锁宽高比，因其值始终相对于包含块宽度计算，从而将高度与宽度绑定；需配合position:relative容器和absolute子元素，且不可设子元素height:100%。
为什么用 padding-top 百分比能锁住宽高比
因为 padding 的百分比值在块级元素中，始终相对于**包含块的宽度**计算，而不是高度。这恰好把“高度依赖宽度”的关系固化下来——只要容器宽度变，padding-top 就自动按比例撑开内部空间，视觉上就卡住了宽高比。
常见错误是直接设 height: 56.25%（16:9），结果啥也不显示：百分比高度在无显式高度父容器里无效，浏览器根本不知道“100%”该参考谁。
- 只对
padding-top或padding-bottom有效；padding-left/padding-right百分比也参照宽度，但不参与高度控制 - 必须配合
position: relative容器 +position: absolute内容层，否则 padding 会把内容往下推，不是“撑出空白区域” - 不要给子元素设
height: 100%，它会去争抢父容器的 height（而父容器 height 是 auto），失效；改用top/bottom: 0
padding-top 计算公式和常见比例速查
公式就是：padding-top = (目标高度 ÷ 目标宽度) × 100%。比如 16:9 → 9÷16=0.5625 → padding-top: 56.25%；4:3 → 3÷4=0.75 → padding-top: 75%。
实际写的时候别手算，容易进位误差。这些值可以直接抄：
立即学习“前端免费学习笔记（深入）”；
- 16:9 →
padding-top: 56.25% - 4:3 →
padding-top: 75% - 1:1 →
padding-top: 100% - 21:9（超宽屏）→
padding-top: 42.857142%（建议截断到42.857%，CSS 解析够用）
注意：Sass/Less 里可用除法直接写 padding-top: percentage(9/16)，但原生 CSS 不支持运算，必须手填数字。
响应式下怎么避免 padding 方案失效
最大陷阱是：媒体查询里只改了容器宽度，却忘了同步更新 padding-top 值。比如桌面端用 16:9，移动端切到 4:3，但 padding-top 还是 56.25%，画面就被压扁或拉伸。
正确做法是为不同断点单独定义 padding：
aspect-container {
position: relative;
width: 100%;
}
.aspect-container::before {
content: "";
display: block;
padding-top: 56.25%; /* desktop */
}
@media (max-width: 768px) {
.aspect-container::before {
padding-top: 75%; /* mobile 4:3 */
}
}另一个坑：用 max-width 限制容器但没配 width: 100%，导致 padding-top 按父容器全宽算，超出预期。务必确认最终生效的 width 是你想要的那个。
替代方案对比：aspect-ratio 能不能直接用
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio: 16/9，写法极简，且能和 width 或 height 任意一个配合自动算另一个。
但它有硬伤：
- IE 完全不支持，旧版 Safari（aspect-ratio 在 replaced element（如
<img alt="CSS固定比例布局技巧_保持容器宽高比的Padding方案" >）上生效，对普通 div 无效 - Flex/Grid 容器里的子项如果设了
aspect-ratio，可能被父容器的align-items或justify-content截断，表现不稳定 - 动画中修改
aspect-ratio值，部分浏览器会触发重排而非重绘，性能不如 padding 方案平滑
结论：新项目、纯现代环境可直接上 aspect-ratio；但只要还要兼容 iOS 15.3 或需要嵌套在复杂布局里，padding-top 仍是更可控的选择。
真正容易被忽略的是：所有 padding 方案都要求内容层用 position: absolute 覆盖上去，而这个绝对定位的元素如果含文字或按钮，得手动加 z-index 和 pointer-events 控制交互层级——不然点不到。
