视频元素无法铺满父级.hero div的响应式布局问题求助

你的视频无法铺满.hero容器的核心原因是缺少强制视频覆盖容器的CSS属性，同时媒体查询逻辑存在重复无效的问题。以下是修正后的代码和关键说明：

修正后的CSS代码 #

.hero {
  position: relative;
  z-index: 1;
  height: 90vh;
  width: 100%;
  overflow: hidden; /* 隐藏视频超出容器的部分 */
}

#myVideo {
  position: absolute;
  top: 0;
  left: 0; /* 从容器左上角开始布局，确保完全覆盖 */
  z-index: -1;
  filter: brightness(65%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心属性：让视频保持宽高比的同时覆盖整个容器 */
}

/* 根据容器宽高比精细调整视频适配逻辑 */
@media (min-aspect-ratio: 16/9) {
  #myVideo {
    height: auto;
    width: 100%; /* 容器更宽时，视频宽度铺满，高度自适应 */
  }
}

@media (max-aspect-ratio: 16/9) {
  #myVideo {
    width: auto;
    height: 100%; /* 容器更高时，视频高度铺满，宽度自适应 */
  }
}

关键修改说明 #

1. 添加object-fit: cover：
   这是解决视频无法铺满的核心。默认情况下，视频会保持自身原始宽高比，不会主动拉伸或裁剪来填满容器。object-fit: cover会让视频在保持宽高比的同时，完全覆盖容器，超出部分自动裁剪，彻底避免留白或黑边。

2. 给.hero添加overflow: hidden：
   防止视频超出容器的部分显示在页面上，保证视觉上容器被完全填满。

3. 调整视频定位为top:0; left:0：
   原代码的right:0; bottom:0可能导致视频在某些尺寸下出现偏移，改为从左上角开始布局，确保视频完全贴合容器边缘。

4. 修正媒体查询逻辑：
   你之前的两个媒体查询设置了完全相同的样式，没有实际作用。修正后会根据容器与视频的宽高比（16:9），分别让视频宽度或高度铺满容器，配合object-fit实现更精准的响应式适配。

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