在网页开发中，使用video标签嵌入视频时，经常会出现视频原始比例和容器尺寸不一致的情况，这时候可以通过CSS的object-fit属性调整视频的填充模式，让视频以合适的方式适配容器。
object-fit属性基础说明
object-fit是CSS中用于控制替换元素（如img、video、iframe等）内容如何适配其容器的属性，对于video元素来说，它可以决定视频画面在容器内的缩放、裁剪和定位方式。该属性有多个常用取值，不同取值对应不同的展示效果。
常用取值及效果
- fill：默认值，视频会被拉伸以填满整个容器，不保持原始比例，可能会导致视频画面变形。
- contain：保持视频原始比例进行缩放，直到视频的宽或高适应容器尺寸，可能会在容器内留下空白区域。
- cover：保持视频原始比例进行缩放，直到视频的宽和高都覆盖容器，超出容器的部分会被裁剪。
- none：视频保持原始尺寸，不会进行缩放，超出容器的部分会被裁剪。
- scale-down：效果类似none或contain中尺寸更小的那个，最终尺寸不会超过视频原始尺寸。
具体使用示例
首先我们创建一个基础的HTML结构，设置一个固定尺寸的video容器，嵌入一个测试视频：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频object-fit示例</title>
<style>
.video-container {
width: 800px;
height: 400px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.video-container video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="video-container">
<video src="https://ipipp.com/test-video.mp4" controls></video>
</div>
</body>
</html>此时没有设置object-fit属性，默认使用fill值，视频会被拉伸填满容器，如果视频原始比例和容器比例不同，就会出现变形。接下来我们尝试不同的object-fit取值。
使用contain模式
修改CSS样式，给video元素添加object-fit: contain，视频会保持原始比例缩放，完整显示在容器内：
.video-container video {
width: 100%;
height: 100%;
object-fit: contain;
background-color: #000; /* 给空白区域添加背景色，方便观察 */
}使用cover模式
如果需要视频完全覆盖容器，不留下空白，可以使用cover模式，超出容器的部分会被裁剪：
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}结合object-position调整位置
当使用cover或者none取值时，视频超出容器的部分默认是居中裁剪的，我们可以结合object-position属性调整视频在容器中的对齐位置，比如设置靠左对齐：
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top; /* 视频左上角对齐容器左上角 */
}注意事项
- object-fit属性需要作用在video元素本身，而不是它的父容器上，否则不会生效。
- 如果视频本身没有设置width和height为100%，object-fit的效果可能无法正常显示，因为容器尺寸和视频尺寸没有建立关联。
- 部分旧版本的浏览器可能不支持object-fit属性，实际开发中如果需要兼容旧浏览器，可以添加对应的前缀或者采用降级方案。
常见问题解答
为什么设置了object-fit没有效果
首先检查是否将object-fit属性写在了video元素的样式上，其次确认video元素是否设置了width和height为100%，如果视频尺寸固定，容器尺寸变化后object-fit也无法生效。
cover模式裁剪的部分可以自定义吗
可以通过object-position属性调整视频的对齐位置，从而控制裁剪的区域，比如想要保留视频右侧内容，可以设置object-position为right center。
object-fitHTML_video视频填充模式CSS修改时间：2026-06-04 18:05:06