object-fit是CSS属性，用于控制视频在容器中的缩放方式；常用值有fill（拉伸填充）、contain（保持比例完整显示）、cover（保持比例裁剪填充）、none（不缩放）和scale-down（取最小尺寸）；设置width和height后，object-fit才能生效，其中cover最常用于全屏或响应式设计中避免黑边。
在HTML中使用<video>标签播放视频时，如果希望精确控制视频画面在容器中的显示方式（比如拉伸、裁剪或保持比例填充），就需要用到CSS属性 object-fit。这个属性可以调整视频内容如何适应其容器的宽度和高度。
什么是 object-fit？
object-fit 是一个CSS属性，用于定义可替换元素（如 <img> 或 <video>）的内容如何缩放以适应其容器。对视频来说，它决定了视频画面是完整显示、被裁剪，还是被拉伸填满容器。
常用的 object-fit 值及用法
以下是针对 <video> 常用的 object-fit 取值：
- fill：拉伸视频以完全填满容器，不保持宽高比，可能导致变形。
- contain：保持宽高比，完整显示视频内容，可能留有空白区域（黑边）。
- cover：保持宽高比，但会裁剪部分画面，使视频完全覆盖容器（最常用）。
- none：不缩放，视频按原始尺寸显示，可能溢出或太小。
- scale-down：类似于 contain，但会选择原始尺寸和 contain 中较小的一种。
实际应用示例
假设你有一个固定大小的容器，并希望视频完全覆盖它且不出现黑边：
立即学习“前端免费学习笔记（深入）”；
<video controls style="width: 100%; height: 400px; object-fit: cover;"><source src="example.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
这里设置了 object-fit: cover，视频会保持原始比例，同时裁剪超出部分，确保整个容器被填满。
如果你希望视频完整显示，即使上下有空白：
video {width: 100%;
height: 400px;
object-fit: contain;
}
注意事项
要让 object-fit 生效，必须给 <video> 明确设置 width 和 height，否则它将按默认行为布局，属性无效。
另外，如果需要兼容老版本浏览器（如IE），需注意 object-fit 在IE中不被支持，可考虑使用背景图模拟或JavaScript方案替代。
基本上就这些。掌握 object-fit 能让你更灵活地控制视频显示效果，特别是在响应式设计或全屏视频背景下非常实用。
