百分比 padding 能控制宽高比，因为 padding-top/bottom 的百分比值按包含块宽度计算，配合 position: absolute 可固定容器比例；需父元素设 position: relative 且不设 height，内容需额外包裹并绝对定位。
百分比 padding 为什么能控制宽高比
因为 CSS 规范里明确写了：padding-top 和 padding-bottom 的百分比值，是相对于**包含块的宽度**计算的，不是高度。这个反直觉特性，恰恰是实现宽高比的关键。
比如父容器宽 400px，padding-top: 50% 就等于 200px，不管父容器实际高度多少。你把子元素用 position: absolute 拉满，就能稳住一个 2:1 的容器区域。
- 只对
padding-top/padding-bottom有效；padding-left/padding-right同样按父宽算，但一般不用来控高宽比 - 必须配合
position: relative在父容器上，否则absolute子元素会脱离预期上下文 - 内容区域需要额外包裹一层，否则文字/图片会撑开父容器，破坏比例
最简可行代码结构（含占位内容）
下面这段 HTML+CSS 是真正能直接粘贴进项目跑起来的最小闭环：
<div class="aspect-ratio-box">
<div class="aspect-ratio-content">
<img src="..." alt="">
</div>
</div>.aspect-ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 → 9/16 = 0.5625 */
}
.aspect-ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}-
padding-top值 = 目标高度 ÷ 宽度，如 4:3 写75%，1:1 写100% - 别给
.aspect-ratio-box设height，否则会覆盖 padding 的占位效果 - 如果内容要居中，直接在
.aspect-ratio-content里用display: flex或text-align: center
响应式断点下怎么换比例
不能靠媒体查询直接改 padding-top 百分比——因为它的计算基准始终是当前宽度，换屏尺寸后自动重算，你只要在不同断点里设好对应比例就行。
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.aspect-ratio-box {
padding-top: 75%; /* 切成 4:3，在小屏更稳 */
}
}
@media (min-width: 769px) {
.aspect-ratio-box {
padding-top: 56.25%; /* 大屏保持 16:9 */
}
}- 所有断点里的
padding-top值都还是相对于**该断点下父容器的宽度**，逻辑一致 - 避免在同一个类里用多个 media query 叠加写法，容易漏掉重置；建议用
min-width+max-width明确区间 - 如果用 CSS 自定义属性动态控制比例，注意 Safari 旧版本不支持在
padding里用var(--ratio)
容易被忽略的兼容性和陷阱
这招在现代浏览器里很稳，但几个细节不处理就会白忙活：
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则padding百分比失去参照，变成 0 - Flex 或 Grid 容器里的子项默认不触发
padding-top百分比的正常计算，得加align-self: stretch或显式设宽 - 用
aspect-ratioCSS 属性（Chrome 88+）更直观，但它不支持 IE 和旧版 Safari，且无法和padding方案混用——别试图用它替代padding做兼容层 - 如果内容是 iframe 或视频，记得加
width: 100%; height: 100%，否则可能只显示左上角一小块
真正麻烦的是嵌套场景：当这个带 padding 的盒子又被放进另一个 flex item 里时，它的宽度可能被压缩，导致 padding 计算失准——这时候就得检查外层的 min-width 和 flex-shrink 设置。
