在页面里嵌入HTML5视频时，经常需要让视频恰好铺满一个固定尺寸的容器，例如首页横幅、弹窗背景或卡片封面。直接给<video>元素设置width:100%和height:100%，往往会得到四周留黑边或画面被拉伸的结果，原因在于视频默认按照原始宽高比进行缩放。要真正实现100%填充父元素，需要明确区分三种效果：拉伸、等比留白和等比裁剪。拉伸会破坏画面比例，留白会出现明显黑边，只有等比裁剪才能既铺满容器又保持视频内容正常显示。本文会围绕object-fit属性和绝对定位两种思路展开，给出可以直接使用的HTML与CSS代码。
下面先看一个常见的基础结构。容器负责控制展示区域的大小，视频元素则通过CSS来适配容器。这里要强调，父容器如果使用百分比高度，必须保证其祖先元素的高度已经被确定，否则height:100%不会生效。实际开发中通常会为最外层容器指定明确的px高度，或使用aspect-ratio、padding-top等技巧生成比例高度。在确定了容器尺寸之后，再来处理video的填充方式，才能避免出现容器塌陷或高度失效的问题。
一、为什么video不会自动铺满容器
<video>元素与<img>一样属于替换元素，浏览器会读取媒体文件的元数据获取其固有宽高比。当只指定width或height其中一个属性时，另一个会自动按比例计算；当两个属性都指定但比例与视频原始比例不匹配时，浏览器通常不会为了填满容器而裁剪视频画面，而是尽量完整显示视频内容。这种表现类似于给图片设置object-fit:contain，结果就是容器的一部分区域被留白。
举例来说，一个宽800px、高400px的容器，如果放入一个16:9的视频，视频原始比例约为1.78:1，而容器比例是2:1。假设只设置width:100%;height:100%，部分浏览器会拉伸视频画面以适应容器高度，部分浏览器则会保持视频比例并在左右两侧留出黑边。无论哪种结果，都不能满足“铺满且不变形”的需求。
<div class="box"> <video src="demo.mp4"></video> </div>
.box {
width: 800px;
height: 400px;
background: #000;
}
.box video {
width: 100%;
height: 100%;
}
上面的代码并不能稳定实现铺满效果。要改变视频内容在元素框内的适应方式，就需要用到object-fit属性，或者通过定位和尺寸约束手动实现裁剪。两种方式的核心都是让视频内容完全覆盖容器，同时保持原始宽高比。
二、使用object-fit实现视频填充父元素
object-fit属性专门用于控制替换元素的内容如何适应元素框，对<video>和<img>同样有效。它有几个常用取值：fill表示拉伸内容以完全填充元素框，不保持比例；contain表示缩放内容以完整显示在元素框内，保持比例但可能留白；cover表示缩放内容以完全覆盖元素框，保持比例并裁剪溢出部分；none表示保持原始尺寸；scale-down则取none和contain中较小的一个。要让视频铺满父元素且不变形，最合适的取值是cover。
使用cover时，视频会等比放大到刚好覆盖整个容器，超出容器的部分会被裁剪。为了实现裁剪效果，父容器需要设置overflow:hidden，否则放大后的视频可能会溢出到容器外部，影响页面其他元素的布局。同时建议给<video>设置display:block，消除行内元素底部可能出现的几像素空隙。
.video-container {
width: 800px;
height: 450px;
overflow: hidden;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
<div class="video-container"> <video src="banner.mp4" muted loop autoplay playsinline></video> </div>
这种写法的优点是代码非常简洁，语义清晰，维护成本低。object-fit在现代浏览器中支持良好，但IE浏览器并不支持该属性，Edge从16版本开始才提供支持。如果项目需要兼容IE或较老的Edge版本，就需要考虑使用绝对定位的兼容方案，或者在支持检测通过后再启用object-fit。
三、兼容方案：绝对定位与transform实现等比裁剪
在不支持object-fit的环境中，可以通过绝对定位配合transform来模拟cover的效果。整体思路是：将父容器设为定位上下文，把<video>从文档流中移出，使用min-width和min-height保证视频至少覆盖容器，再用transform将视频居中，超出容器的部分交给overflow:hidden裁剪。这样视频始终保持原始比例，不会发生拉伸变形。
.video-container {
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
这里的关键是min-width:100%和min-height:100%同时存在。它们保证视频的宽度和高度都至少等于容器的宽度和高度，因此视频一定能够完全覆盖容器。由于width和height设置为auto且没有同时固定宽高，浏览器会继续保持视频的固有宽高比，最终视频只会在一个方向上刚好贴合容器，另一个方向则超出并留待裁剪。translate(-50%, -50%)的作用是把视频的中心点对齐到容器中心，这样裁剪会均匀地分布在四周，而不是偏向某一侧。
如果还需要兼容不支持transform的旧版浏览器，可以使用负margin来近似实现居中。不过负margin需要预先知道视频的固有尺寸，或者通过JavaScript动态计算，通用性不如transform。实际项目中，建议使用CSS特性检测，优先采用object-fit方案，不支持时再启用绝对定位方案。
四、响应式容器与移动端注意事项
固定像素宽高的容器在响应式页面中不够灵活。更常见的做法是让容器宽度跟随父级百分比变化，高度则根据视频比例自动计算。现代浏览器可以使用aspect-ratio属性，直接为容器声明宽高比，例如aspect-ratio:16/9，这样只需设置width:100%，高度就会自动按比例生成，视频再利用object-fit:cover铺满即可。
.responsive-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.responsive-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
如果项目需要兼容不支持aspect-ratio的浏览器，可以使用经典的padding-top hack。原理是利用padding-top的百分比值相对于父元素宽度计算，通过设置height:0和padding-top:56.25%模拟出16:9的容器高度。内部视频使用绝对定位铺满这个区域，再结合object-fit或绝对定位方案完成填充。
.padding-video {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 9 / 16 = 0.5625 */
overflow: hidden;
}
.padding-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
移动端场景下还需要注意自动播放策略。iOS设备上的Safari要求视频必须带有muted属性才允许自动播放，同时还需要加上playsinline属性，否则视频可能会被强制全屏，根本无法实现内联填充。作为背景视频时，通常会给<video>加上loop、autoplay、muted、playsinline和preload="metadata"等属性，避免预加载过大文件影响页面性能。
综合来看，如果不需要考虑IE浏览器，优先使用object-fit:cover方案，代码简单直观，兼容性在现代浏览器中已经足够好。如果项目必须兼容IE或旧版Edge，则使用绝对定位与transform的组合方案，必要时通过@supports或JavaScript进行特性检测。两种方案也可以分别封装成工具类，在不同场景下灵活切换，确保视频在任何容器中都能稳定铺满。
HTML5视频object-fitCSS布局修改时间：2026-09-20 10:24:07