padding-top百分比能控制高度比例，因其值始终基于父容器宽度计算，如宽400px设56.25%即得225px高度；需配合position: relative与absolute定位子元素填满该空间，才能实现宽高比锁定。
padding-top 百分比为什么能控制高度比例
CSS 里
（和
）的百分比值，是相对于
包含块的宽度
计算的，不是高度。这个行为很反直觉，但正是它能实现宽高比锁定的关键。
比如父容器宽 400px，子元素设
，那实际 padding-top 就是
—— 这个值就“撑出”了所需的高度。
注意：要让 padding 产生的空间真正变成内容区高度，得配合
和绝对定位的子容器。
标准实现结构：padding + absolute 定位
这是最稳定、兼容性最好的做法（IE9+ 都支持）：
立即学习
“
前端免费学习笔记（深入）
”；
外层盒子只设宽、
，不设 height
内层盒子用
填满整个 padding 区域
常见错误：
忘记给外层加
，导致内层 absolute 脱离预期上下文
给外层直接设
，会覆盖 padding 的高度效果
在外层写
或
，可能干扰 padding 占据的空间渲染（尤其 Safari）
不同宽高比怎么算 padding-top 值
直接用「目标高度 ÷ 宽度」换算成小数再 × 100%：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
→
→
→
→
→
→
→
→
别手算，用 CSS 自定义属性或预处理器变量更安全，避免精度丢失。
现代替代方案：aspect-ratio 属性 vs padding 技巧
CSS 新增的
（Chrome 88+/Firefox 89+/Safari 15.4+）确实更直观：
但它不能解决所有问题：
不支持 IE 和旧版 Safari（哪怕加
也无效）
与
/
组合时行为不如 padding 可控
在 flex/grid 容器中，某些浏览器下仍会忽略
（尤其是嵌套场景）
所以目前真实项目里，
方案仍是 fallback 必选项；
可作为增强，用 @supports 包裹。
真正容易被忽略的是：当盒子内容需要响应式文字或图片时，padding 方案里必须确保内部元素不依赖外层 height 计算（比如
在 padding 撑开的区域里会失效），得改用
或 JS 补偿。
padding-toppadding-bottompadding-top: 56.25%400 × 0.5625 = 225pxposition: relativepadding-topposition: absolute.aspect-ratio-box {
width: 100%;
padding-top: 56.25%; /* 16:9 → 9/16 = 0.5625 */
position: relative;
background: #eee;
}
.aspect-ratio-box > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
position: relativeheightdisplay: flexdisplay: grid16:99 / 16 = 0.5625padding-top: 56.25%4:33 / 4 = 0.75padding-top: 75%1:11 / 1 = 1padding-top: 100%21:9（超宽屏）9 / 21 ≈ 0.4286padding-top: 42.857%aspect-ratio.modern-box {
width: 100%;
aspect-ratio: 16 / 9;
}
-webkit-aspect-ratiomax-widthmin-heightaspect-ratiopadding-topaspect-ratiofont-size: 5vhclamp()