如何利用CSS百分比padding实现固定比例盒子-css教程-PHP中文网

百分比padding值按父容器宽度计算是实现固定比例盒子的关键前提，因css规范规定padding-top/bottom的百分比基于包含块宽度，如16:9需设padding-bottom: 56.25%（9÷16×100），配合position: relative、height: 0及absolute子元素填满空间。

如何利用css百分比padding实现固定比例盒子

为什么百分比padding的值是相对于父容器宽度计算的

这是实现固定比例盒子的关键前提。CSS规范规定，padding-top和padding-bottom在块级元素上使用百分比时，参考的是**包含块（containing block）的宽度**，而不是高度——哪怕你写的是上下内边距。这个反直觉的设计恰恰成了控制宽高比的突破口。

常见错误是误以为padding-bottom: 56.25%会按父容器高度的56.25%计算，结果盒子高度始终为0或远小于预期。实际它按父容器宽度算：若父宽400px，padding-bottom: 56.25%就是225px，正好构成16:9（400×0.5625=225）。

只对padding-top/padding-bottom有效；padding-left/padding-right也按父宽算，但不用于控高
必须作用于一个“无内容高度”的容器，否则padding会叠加在内容高度之上，破坏比例
父容器需有明确宽度（如width: 100%或固定值），否则百分比失去参照

如何用padding-bottom + absolute定位撑出固定比例容器

单纯设padding-bottom会让盒子内部留空，但自身不产生高度——需要配合position: relative和子元素position: absolute把内容“塞”进这个padding空间里。

div.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
div.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

height: 0必不可少：否则padding会额外增加高度，导致比例失准
子元素必须用absolute，且top/left/width/height全设，才能填满padding生成的空间
如果子元素是<img>，记得加object-fit: cover避免拉伸变形

不同宽高比对应的padding-bottom值怎么算

公式就是：padding-bottom = (height / width) × 100%。别背数字，现场算更快更准。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

4:3 → padding-bottom: 75%（3÷4=0.75）
16:9 → padding-bottom: 56.25%（9÷16=0.5625）
1:1 → padding-bottom: 100%
21:9（超宽屏）→ padding-bottom: 42.857%（9÷21≈0.42857）

注意：不要四舍五入到小数点后1位——56.3%会导致16:9偏差明显，尤其在大尺寸屏幕上。

现代替代方案：aspect-ratio属性是否能直接取代padding技巧

可以，但兼容性要查清楚。aspect-ratio是2021年才稳定落地的属性，Chrome 88+/Firefox 89+/Safari 15.4+支持，IE完全不支持。

如果项目需兼容旧版Safari（如iOS 14.4及更早）或微信内置浏览器（部分版本仍用老旧WebKit），padding-bottom方案仍是刚需。简单判断：跑getComputedStyle(document.body).aspectRatio，返回auto或undefined就说明不支持。