padding-top百分比能撑开容器高度，因其值按父元素宽度计算而非高度，可实现固定纵横比；如16:9设为56.25%，需父容器有明确宽度且子元素绝对定位填满。
为什么用 padding-top 百分比能撑开容器高度？
因为 padding-top（和 padding-bottom）的百分比值，是相对于父元素宽度计算的，不是高度。这个特性被用来“骗”出固定纵横比——比如 16:9，你设 padding-top: 56.25%（即 9/16），容器顶部留白就自动随宽度缩放，从而锁定高宽关系。
注意：必须让父容器有明确宽度（比如 width: 100% 或具体像素），否则百分比 padding 会失效；同时子元素（如 <video></video>）需绝对定位或 height: 100% 填满这个“垫高”的区域。
怎么写一个可靠的 16:9 视频容器？<div class="video-wrapper">
<video controls><source src="demo.mp4" type="video/mp4"></source></video>
</div>
对应 CSS：
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
关键点：
-
padding-top必须写在包裹容器上，不能写在<video></video>自身 -
video必须设position: absolute，否则它会把 padding 当成内容间隙往下推，导致容器实际高度变成「padding + video 高度」 - 如果视频源本身不是 16:9，
object-fit: cover可防止拉伸变形（加在video上）
其他常见比例怎么算 padding-top？
公式就是：padding-top: (height / width) * 100%。几个高频值：
- 4:3 →
75%（3 ÷ 4 = 0.75） - 21:9（超宽屏）→
42.857%（9 ÷ 21 ≈ 0.42857） - 1:1（正方形）→
100% - 移动端常用 9:16（竖屏）→
177.778%（16 ÷ 9 ≈ 1.77778），此时建议换用padding-bottom+bottom: 0避免滚动条干扰
现代替代方案：aspect-ratio 能不用技巧了吗？
可以，但得看兼容性。CSS 新增的 aspect-ratio 属性（如 aspect-ratio: 16 / 9）更直观，且支持 video 元素原生响应。
问题在于：
- Chrome 88+、Firefox 89+、Safari 15.4+ 支持，但 iOS Safari 15.4 之前完全不支持
- IE 完全不支持，Edge 旧版也不行
- 若需兼容老版本微信内置浏览器（常基于旧版 X5 内核），
padding-top技巧仍是稳妥选择
真正要落地时，别只盯着“新不新”，得查项目实际覆盖的 UA 和系统版本。一个没兜底的 aspect-ratio 在某些安卓 WebView 里会直接塌成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
