padding-top百分比能控制高度比例，因其值始终基于父容器宽度计算，如宽400px设56.25%即得225px高度；需配合position: relative与absolute定位子元素填满该空间，才能实现宽高比锁定。
padding-top 百分比为什么能控制高度比例
CSS 里 padding-top（和 padding-bottom）的百分比值，是相对于包含块的宽度计算的，不是高度。这个行为很反直觉，但正是它能实现宽高比锁定的关键。
比如父容器宽 400px，子元素设 padding-top: 56.25%，那实际 padding-top 就是 400 × 0.5625 = 225px —— 这个值就“撑出”了所需的高度。
注意：要让 padding 产生的空间真正变成内容区高度，得配合 position: relative 和绝对定位的子容器。
标准实现结构：padding + absolute 定位
这是最稳定、兼容性最好的做法（IE9+ 都支持）：
- 外层盒子只设宽、
padding-top，不设 height - 内层盒子用
position: absolute填满整个 padding 区域
.aspect-ratio-box {
width: 100%;
padding-top: 56.25%; /* 16:9 → 9/16 = 0.5625 */
position: relative;
background: #eee;
}
<p>.aspect-ratio-box > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
</p>
常见错误：
- 忘记给外层加
position: relative，导致内层 absolute 脱离预期上下文 - 给外层直接设
height，会覆盖 padding 的高度效果 - 在外层写
display: flex或display: grid，可能干扰 padding 占据的空间渲染（尤其 Safari）
不同宽高比怎么算 padding-top 值
直接用「目标高度 ÷ 宽度」换算成小数再 × 100%：
-
16:9→9 / 16 = 0.5625→padding-top: 56.25% -
4:3→3 / 4 = 0.75→padding-top: 75% -
1:1→1 / 1 = 1→padding-top: 100% -
21:9（超宽屏）→9 / 21 ≈ 0.4286→padding-top: 42.857%
别手算，用 CSS 自定义属性或预处理器变量更安全，避免精度丢失。
现代替代方案：aspect-ratio 属性 vs padding 技巧
CSS 新增的 aspect-ratio（Chrome 88+/Firefox 89+/Safari 15.4+）确实更直观：
.modern-box {
width: 100%;
aspect-ratio: 16 / 9;
}
但它不能解决所有问题：
- 不支持 IE 和旧版 Safari（哪怕加
-webkit-aspect-ratio也无效） - 与
max-width/min-height组合时行为不如 padding 可控 - 在 flex/grid 容器中，某些浏览器下仍会忽略
aspect-ratio（尤其是嵌套场景）
所以目前真实项目里，padding-top 方案仍是 fallback 必选项；aspect-ratio 可作为增强，用 @supports 包裹。
真正容易被忽略的是：当盒子内容需要响应式文字或图片时，padding 方案里必须确保内部元素不依赖外层 height 计算（比如 font-size: 5vh 在 padding 撑开的区域里会失效），得改用 clamp() 或 JS 补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
