如何设置视频样式：填满整个div、保持宽高比且页面缩小时响应式

要实现视频填满div容器、维持宽高比且响应式的效果，你可以采用容器比例占位+object-fit属性的方案，具体实现如下：

1. HTML结构 #

先搭建基础的容器与视频结构：

<div class="video-container">
  <video autoplay muted loop playsinline>
    <source src="你的视频地址.mp4" type="video/mp4">
  </video>
</div>

• autoplay muted loop playsinline 是匹配目标网站的自动播放配置，可根据需求调整。

2. CSS核心样式 #

.video-container {
  position: relative;
  width: 100%;
  /* 16:9 宽高比，计算方式：9/16*100% = 56.25%，其他比例可自行替换 */
  padding-top: 56.25%;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 关键属性：保持视频宽高比，同时填满容器，超出部分裁剪 */
  object-fit: cover;
}

3. 关键原理说明 #

• 容器比例控制：利用padding-top的百分比特性（基于容器宽度计算），固定容器宽高比，避免视频拉伸变形。如果目标网站是其他比例，比如4:3，就把padding-top设为75%。
• object-fit: cover：让视频保持自身宽高比，同时完全覆盖容器区域，超出部分自动裁剪，这是实现目标网站视觉效果的核心。
• 响应式适配：容器宽度设为100%，会自动继承父元素宽度，页面缩放时容器同步自适应，视频也会跟着调整。

4. 额外优化（可选） #

如果需要限制容器最大宽度（和目标网站一致），可给容器添加：

.video-container {
  max-width: 1200px; /* 替换为目标网站的最大宽度 */
  margin: 0 auto;
}

内容的提问来源于stack exchange，提问作者FlexLuthor