CSS中Video无法铺满父容器宽度的问题排查与解决需求

问题根源是视频元素默认的object-fit属性为contain——它会强制保持视频原始宽高比，当容器宽高比和视频不一致时，就会出现无法铺满容器的情况。要实现你要的固定高度+宽度完全铺满容器的效果，只需给video加一行CSS属性：

修改后的完整代码 #

CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-rated-container-1 {
  width: 100%;
  margin: 0 auto;
}
.video-container {
  width: 100%;
  border: 1px solid black;
}
.video-container video {
  width: 100%;
  height: 250px;
  object-fit: cover; /* 核心：保持比例并铺满容器，裁剪多余部分 */
  /* 若允许视频拉伸变形，可替换为 object-fit: fill; */
}

HTML #

<section class="top-rated-container-1">
    <div class="video-container">
        <video autoplay loop muted playsinline
            poster="https://a.ltrbxd.com/resized/sm/upload/6x/g7/m0/1h/step-0-1400-0-788-crop.jpg?k=33dfcdf72e">
            <source src="https://a.ltrbxd.com/sm/upload/lq/7m/3m/f0/highest-rated-eeaao-720p-2k.webm?k=cfa68eefb2"
                type="video/webm">
            <source src="https://a.ltrbxd.com/sm/upload/37/1y/9b/s0/highest-rated-eeaao-720p-2k.mp4?k=594f85a26b"
                type="video/mp4">
        </video>
    </div>
</section>

选项说明 #

• object-fit: cover：优先保证视频比例不变，裁剪掉超出容器的部分，确保容器被完全填满，视觉效果自然。
• object-fit: fill：强制视频拉伸至容器的宽高尺寸，会导致视频变形，适合不需要保留比例的场景。

内容的提问来源于stack exchange，提问作者Adrian Gaile Singh