必须设height: 0，因为padding-bottom百分比基于父宽计算，若不清除原始高度，会与内容撑高叠加导致比例失真；需配合position: relative和absolute实现子元素填满。
直接用 padding-bottom + position: relative + position: absolute 就能稳住视频容器比例，不需要 JS，也不依赖现代 CSS 属性。
为什么必须设 height: 0？
因为 padding-bottom 的百分比是按父容器宽度算的，但如果不清掉原始高度，它会叠加在内容撑开的高度上，导致比例错乱。比如你写了 padding-bottom: 56.25%（对应 16:9），但容器里有文字或默认行高，实际高度 = 文字高度 + 56.25% 宽度 → 比例就崩了。
常见错误现象：padding-bottom 写了，视频还是被拉伸/压扁，或者顶部/底部多出空白。
- 必须加
height: 0或min-height: 0 - 父容器要有明确宽度（如
width: 100%、width: 400px），否则百分比无基准 - 子元素不能靠普通流式布局填充，否则会被 padding 挤出去
padding-bottom 值怎么算？
公式就是：宽高比的「高 ÷ 宽 × 100%」。浏览器不认冒号，只认数字，所以得手动换算。
立即学习“前端免费学习笔记（深入）”；
常用值可以直接抄：
-
16:9→padding-bottom: 56.25%（9 ÷ 16 = 0.5625） -
4:3→padding-bottom: 75%（3 ÷ 4 = 0.75） -
1:1→padding-bottom: 100% -
21:9（超宽屏）→padding-bottom: 42.857%（9 ÷ 21 ≈ 0.42857）
想动态算？可以用 calc(100% * 9 / 16)，但注意旧版 Safari 对 calc() 在 padding 中的支持不稳定，生产环境建议预计算好写死。
子元素怎么填满这个“空盒子”？
外层靠 padding-bottom 撑出空间，但那块区域默认是“内边距”，不是内容区——所以子元素得脱离文档流，用 position: absolute 硬塞进去。
关键点：
- 外层容器必须设
position: relative，给绝对定位提供定位上下文 - 子元素要覆盖整个 padding 留出的空间：用
top: 0; left: 0; width: 100%; height: 100% - 如果子元素是
<iframe>或<video>，记得加display: block防止底部留白（inline 元素默认 baseline 对齐）
示例结构：
.video-wrapper {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.video-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}和 aspect-ratio 比，这方案还值得用吗？
值得，尤其当你还要支持 Safari 15.4 以下、Firefox 89 以下、或某些安卓 WebView 时。aspect-ratio 虽简洁，但 2026 年仍有约 8% 的真实用户设备不支持（主要集中在企业内网旧终端和部分机顶盒系统）。
不过要注意两个隐形成本：
- 语义断裂：外层只是个“占位盒子”，无障碍阅读器可能跳过或误读
- 交互受限：子元素绝对定位后，
scroll-margin、inset等新属性行为可能异常，调试时容易忽略这点
如果你的项目已放弃 IE 和老 Android，且团队熟悉现代 CSS，aspect-ratio: 16 / 9 是更干净的选择；否则，padding 方案仍是线上最稳的兜底手段。
