视频等比缩放需维持固有宽高比，推荐使用CSS原生aspect-ratio属性（如aspect-ratio: 16/9）或padding-bottom技巧（如16:9对应padding-bottom: 56.25%），并配合video元素的width: 100%; height: 100%; object-fit: cover确保填满不变形。
视频等比缩放不变形，关键在于**维持固有宽高比**，不能只靠 width: 100% + height: auto（在某些容器或响应式场景下会失效），更不能固定 height。推荐两种可靠方案：原生 aspect-ratio（现代浏览器）和兼容性更强的 padding-bottom 技巧。
用 aspect-ratio 直接声明宽高比（推荐优先尝试）
这是 CSS 原生支持的属性，写法简洁、语义清晰、无需额外 HTML 结构：
- 给视频容器（比如
<div class="video-wrap">）设置aspect-ratio: 16 / 9或aspect-ratio: 4 / 3 - 再设
width: 100%，高度自动按比例计算，视频内部用width: 100%; height: 100%; object-fit: cover确保填满不拉伸 - 注意：
aspect-ratio作用于容器本身，不是视频元素；它兼容 Chrome 88+、Firefox 89+、Safari 15.4+，移动端基本全覆盖
用 padding-bottom 实现等比占位（兼容老浏览器）
原理是利用 padding 百分比值基于父容器宽度计算的特性，构造一个“无内容但有比例”的容器：
- 容器设
position: relative; width: 100%; height: 0; - 根据宽高比算出 padding-bottom：比如 16:9 →
padding-bottom: 56.25%（9 ÷ 16 = 0.5625）；4:3 →75%（3 ÷ 4） - 视频元素绝对定位填满：
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover - 这个方法 IE9+ 都支持，适合需要兼容旧版桌面浏览器的项目
别忘了 video 元素自身的处理
即使容器比例正确，视频内容仍可能被拉伸或留黑边：
立即学习“前端免费学习笔记（深入）”；
- 务必给
<video>设置width: 100%; height: 100%（在相对/绝对定位容器内才有效） - 用
object-fit: cover让视频等比缩放并裁剪填满；若想完整显示用object-fit: contain，但会有上下/左右黑边 - 移除 video 默认的
height和width属性（HTML 中写的会干扰 CSS 控制）
基本上就这些。aspect-ratio 更干净，padding-bottom 更稳。选哪个，看你的兼容性要求。
