用 padding-top 百分比能锁宽高比，因其值始终按父容器宽度计算，可配合绝对定位实现比例布局；aspect-ratio 更简洁但兼容性差，老项目应优先用 padding 方案。
为什么用 padding-top 百分比能锁宽高比
因为 CSS 中 padding 的百分比值是相对于**父容器宽度**计算的，哪怕写在高度方向（比如 padding-top 或 padding-bottom），它也认父宽。这个“错位”特性正好能用来撑开高度，让子元素按比例占位。
常见错误现象：height: 56.25% 失效、容器塌陷、背景图被拉伸变形——根本原因是直接设高度百分比时，父容器没显式高度，浏览器无法解析相对值。
- 只对
padding-top或padding-bottom用百分比才有效；padding-left/padding-right虽然也按父宽算，但不参与高度控制 - 必须配合
position: relative的父容器 +position: absolute的子内容，否则 padding 会把文字/内联内容往下顶，而不是“预留空间” - 16:9 对应
padding-top: 56.25%（9 ÷ 16 = 0.5625），4:3 是75%，1:1 是100%
aspect-ratio 和 padding 技巧怎么选
aspect-ratio 是现代方案，写法干净：aspect-ratio: 16 / 9，但兼容性有硬伤：IE 全挂，Safari ≤ 15.3 不支持，安卓 WebView 旧版本也不行。
padding 技巧几乎全兼容，连 IE8 都能跑，但它依赖绝对定位，意味着内容要脱离文档流——这对 SEO、可访问性、焦点管理都有隐性影响。
- 如果只需支持 Chrome/Firefox/Safari 16+，优先用
aspect-ratio，一行解决，无副作用 - 需要兼容老系统或微信内置浏览器（尤其 iOS 微信仍用较旧 WKWebView），就用 padding 方案
- 别混用：给同一元素同时写
aspect-ratio和 padding hack，可能触发意外交互（比如 Safari 15.4 下 padding 仍生效，导致双倍高度）
padding 百分比方案的最小 HTML 结构
结构松不得、省不得。少一个包裹层，或者漏掉 position，整个逻辑就断了。
<div class="ratio-box">
<div class="ratio-content">
@@##@@
</div>
</div>
对应 CSS：
.ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-
.ratio-box必须有position: relative，否则.ratio-content的absolute会相对于更外层定位 - 不要给
.ratio-content设padding或margin，它只是个“定位壳”，所有样式该加在内部元素（如img）上 - 如果内容是视频或 iframe，记得加
width: 100%; height: 100%到它们自身，否则默认尺寸会破坏比例
响应式下宽高比要动态变，怎么办
不能只靠媒体查询改一个 padding-top 值——那样在横竖屏切换或缩放时容易抖动，而且维护成本高。
推荐用 CSS 自定义属性 + calc() 组合，把比例参数抽出来，让 JS 或媒体查询只改变量：
.ratio-box {
--aspect-w: 16;
--aspect-h: 9;
padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%);
}
@media (max-width: 768px) {
.ratio-box { --aspect-h: 12; } /* 改成 4:3 */
}
- 避免在媒体查询里重复写
padding-top: 75%这种魔法数字，一改多处容易漏 - JS 动态控制时，直接
element.style.setProperty('--aspect-h', '10')就行，不用操作 className 或重写 style 字符串 - 注意：Safari 15.4 之前不支持在
@media里用calc()引用自定义属性，若需支持，降级为固定值
实际项目里最容易被忽略的，是内容元素自身的尺寸控制。padding 只撑开了容器，但里面那张图、那个 iframe 如果没设 width: 100%; height: 100%，它还是按原始尺寸渲染，宽高比就白锁了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
