最稳兼容方案是 padding-bottom + height: 0；aspect-ratio 最简但不支持老浏览器，需配合 @supports 渐进增强，padding-bottom 法依赖父宽计算、vw 法绑定视口、图片占位法语义清晰但增 DOM。
直接用 aspect-ratio 最省事，但老浏览器不支持；真要兼容所有环境，padding-bottom + height: 0 是最稳的方案。
用 aspect-ratio 快速声明宽高比
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持这个属性，写法极简：
.box { width: 100%; aspect-ratio: 16 / 9; }它会强制容器按给定比例缩放，无论父容器怎么变，都不需要额外 DOM 或 hack。但注意：aspect-ratio 的值不能是百分比，也不能带单位，只接受数字或 a / b 形式；设成 2 / 1 就是宽两倍于高，1 / 1 就是正方形。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
-
aspect-ratio对display: inline元素无效，必须是块级或inline-block - 如果同时设置了
height或min-height，可能覆盖比例计算逻辑 - IE 和 Android 4.4 及更早 WebView 完全不识别，项目需兼容这些环境时不能单独依赖它
用 padding-bottom 撑开高度（兼容性最强）
原理是：任意元素的 padding-bottom 百分比值，始终相对于其**父容器宽度**计算，而不是自身高度。所以我们可以让子元素靠 padding “假装”有高度，再用绝对定位把内容塞进去。
典型结构：
<div class="container"> <div class="ratio-box"></div> <div class="content">实际内容</div> </div>
CSS 关键部分：
.container { width: 100%; position: relative; }
.ratio-box { padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */ height: 0; }
.content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }为什么必须设 height: 0？因为如果不设，padding-bottom 是叠加在默认高度之上的，会导致整体高度大于预期。
常见错误现象：
- 内容被截断或错位 → 检查
.content是否漏了position: absolute或四边 offset - 高度比预想高一截 → 父容器有
padding或border，影响了子元素宽度基准，建议用box-sizing: border-box - 比例算错 → 记住公式：
padding-bottom = (目标高度 ÷ 目标宽度) × 100%，比如 4:3 就是75%，2:1 就是50%
用 vw 单位做视口级固定比例
当容器宽度本身就是视口百分比（如 width: 100vw 或 width: 80%），可以用 vw 直接换算高度：
.box { width: 80%; height: calc(80% * 0.5625); } /* 16:9 容器 */或者更直接：
.box { width: 100vw; height: 56.25vw; }这种写法性能好、无 DOM 开销，但问题也很明确：
- 高度完全绑定视口宽度，不是父容器宽度 → 如果父容器是
max-width: 600px，它照样按整个屏幕算，会撑破布局 - 移动端横竖屏切换时，
vw值突变，可能造成视觉跳动 - 需要手动计算比例，且无法响应父级
padding、margin等干扰
用隐藏图片“借高”（语义清晰但略重）
利用 img 自身等比缩放特性，让一个透明/ base64 图片占位撑高：
<div class="container"> <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='9'/>" alt=""> <div class="content">...</div> </div>
CSS：
.container { width: 100%; position: relative; }
.container img { display: block; width: 100%; height: auto; }
.content { position: absolute; inset: 0; }优势是逻辑直观、无需计算、兼容性拉满；缺点是 DOM 节点多一个，base64 图片虽免请求，但若比例频繁变化，维护成本上升。
容易忽略的关键点：
- 必须设
img为display: block，否则默认 inline 会产生底部空白 - SVG 占位图建议用最小尺寸（如 16×9），避免 base64 过长；不要用 PNG/JPG，体积大且无必要
- 如果内容区域要滚动，
.content需额外加overflow: auto，且不能依赖height: 100%（因父容器高度由图片撑起，非显式值）
真正上线前，别只盯着“能跑”，重点检查父容器是否带 padding、是否用了 transform 缩放、是否在 flex/grid 容器里——这些都会悄悄改变宽度基准，让 padding 百分比或 vw 计算失准。最保险的方式，是选一种主方案，再用 @supports (aspect-ratio: 1) 做渐进增强。
