直接用padding-bottom百分比是最稳、兼容性最好的方案，它不依赖父容器高度，也不需要js，所有主流浏览器（包括ie11）都支持；必须设height:0和position:relative以确保padding按父宽计算并为子元素提供定位上下文，配合position:absolute的video填满容器，再通过object-fit控制缩放方式。
直接用 padding-bottom 百分比是最稳、兼容性最好的方案，它不依赖父容器高度，也不需要 JS，所有主流浏览器（包括 IE11）都支持。
为什么必须设 height: 0 和 position: relative
因为 padding-bottom 的百分比值是按父容器宽度计算的（比如 56.25% = 父宽 × 0.5625），但这个 padding 只有在容器「无内容撑高」时才能真正主导高度。所以必须写 height: 0，否则视频自身会把容器撑开，比例就失效了。
position: relative 是为了让内部 video 的 position: absolute 有个定位上下文——不然它会相对于 body 定位，直接飞出容器。
- 别给父容器设
height、min-height或line-height，它们会干扰padding-bottom占位 - 如果父容器是
display: inline（比如没设block的span），width: 100%会失效，务必确保它是块级或设置了明确宽度 -
overflow: hidden建议加上，防止某些浏览器下video边缘轻微溢出
padding-bottom 数值怎么算才不出错
别硬背 56.25%、75% 这些数字，现场算更可靠：公式是 (height / width) * 100%。注意分子分母顺序——是「高 ÷ 宽」，不是「宽 ÷ 高」。
- 16:9 →
9 / 16 * 100% = 56.25% - 4:3 →
3 / 4 * 100% = 75% - 1:1（正方形）→
1 / 1 * 100% = 100% - 9:16（竖屏）→
16 / 9 * 100% ≈ 177.78%
如果视频源是竖屏（如 720×1280），而容器是 16:9，那 object-fit: cover 一定会裁左右；这不是算错了，是内容和容器比例不一致的必然结果。
video 标签本身要怎么写才不破坏比例
关键不是给 video 设尺寸，而是让它「填满已由 padding-bottom 定义好的空间」。所以它必须脱离文档流，并覆盖整个容器区域。
- 必须加
position: absolute; top: 0; left: 0; width: 100%; height: 100% -
object-fit按需选：contain保全全部画面（可能留黑边），cover填满但会裁剪（推荐多数场景） - 别给
video设width或height的具体像素值，也别写max-width: 100%——它已经由父容器绝对定位控制了 - 如果用了
controls，小屏下按钮可能被压缩或重叠，可在媒体查询里单独限制.video-wrapper的max-width，比如max-width: 800px
和 aspect-ratio 混用会出什么问题
现代项目若只需支持 Chrome 98+ / Safari 15.4+ / Firefox 89+，可直接用 aspect-ratio: 16 / 9，代码更干净。但千万别在同一个项目里混用两种逻辑：
- 比如父容器同时写了
padding-bottom: 56.25%和aspect-ratio: 16 / 9，后者会覆盖前者，老浏览器则完全失效 -
aspect-ratio不支持 fallback，Safari ≤15.3 会渲染成无高度的空盒，且无法通过@supports完全覆盖降级场景 - 如果用了
aspect-ratio，就别再设height: 0和padding-bottom，否则可能冲突导致高度异常
最易被忽略的一点：无论用哪种方案，video 的原始分辨率和容器比例不一致时，object-fit 的行为是确定的，但设计师常误以为是 CSS 错了——其实只是内容本身就不匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
