直接在标签上设置object-fit并配合明确尺寸约束，是最简洁有效的视频比例控制方式；它原生支持替换元素缩放，不改变原始宽高比，仅决定画面如何装入容器。
直接在 <video></video> 标签上设置 object-fit，配合明确的尺寸约束，是控制视频比例最简洁有效的方式。它不改变视频原始宽高比，只决定画面如何“装进”容器——不是靠 JS 计算，也不是靠父容器样式，而是原生 CSS 对替换元素的精准控制。
object-fit 常用取值与适用场景
该属性作用于 <video></video> 元素本身，不同取值带来截然不同的视觉效果：
- cover：保持比例、填满容器、裁剪边缘。适合全屏播放、海报图、背景视频——无黑边且不失真
- contain：保持比例、完整显示全部画面。适合教学演示、预览缩略图——留黑边但内容零丢失
- fill：强行拉伸填满，忽略原始比例。慎用，仅适用于非关键内容（如纯装饰性背景）
- none：不缩放，按原始像素尺寸显示。易溢出或过小，一般需配合固定容器使用
-
scale-down：等效于
none与contain中更小的那个。适合不确定视频尺寸时的保守适配
必须满足的两个前提条件
写上 object-fit: cover 却仍有黑边或变形？大概率是以下任一条件未满足：
-
<video></video>必须有明确的width和height，不能全靠auto。推荐写法：width: 100%; height: auto;配合aspect-ratio: 16 / 9;，或直接设width: 100%; height: 400px; - 父容器需提供可计算的高度。若父容器
height为auto，子元素的height: 100%将失效。可用100vh、flex或grid布局确保高度约束
用 object-position 微调裁剪区域
选了 cover 后，视频被裁剪的位置默认居中。若关键内容（如人脸、标题）偏上或偏左，可用 object-position 精准定位：
-
object-position: top;→ 优先显示上半部分，适合演讲类视频 -
object-position: center top;→ 垂直居中、水平靠上，兼顾构图与重点区域 -
object-position: 20% 30%;→ 水平偏移 20%，垂直偏移 30%，支持像素和百分比
兼容性与降级处理要点
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+、Edge 103+）均支持 object-fit 用于 <video></video>，但仍有细节需注意：
- iOS Safari 14.5 之前对
<video></video>的object-fit完全不支持，仅对<img>生效。真机测试不可跳过 - IE 和旧 Edge 完全不支持，需用
CSS.supports('object-fit', 'cover')检测后降级：例如隐藏原<video></video>，用background-image+poster图片模拟视觉效果 - 第三方播放器（如 Video.js）需穿透到内部
.vjs-tech元素设置样式，外层容器设object-fit无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
