如何调整背景视频高度适配父div？媒体查询下高度失效问题求助

你的问题核心在于以下几点：

1. 两个媒体查询规则完全重复，未起到比例适配作用
2. 仅设置height:100%且仅定位right:0; bottom:0，导致视频无法完全覆盖父容器，比例不符时出现空白
3. 缺少视频与容器比例不匹配时的适配逻辑

方案一：使用object-fit（推荐，现代浏览器支持） #

这是实现背景视频适配最简洁的方式，通过object-fit属性让视频自动按比例缩放并覆盖容器：

HTML（无需修改）

<div class="hero">
  <video autoplay muted loop id="myVideo">
    <source src="/videos/aerial(2).mp4" type="video/mp4" />
  </video>
</div>

修正后的CSS

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

#myVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: brightness(65%);
  object-fit: cover; /* 保持比例并覆盖容器，超出部分自动裁剪 */
  /* 若需完整显示视频（可能出现黑边），替换为 object-fit: contain; */
}

方案二：媒体查询适配（兼容旧浏览器） #

如果需要兼容不支持object-fit的旧浏览器，可通过媒体查询针对不同比例设置视频宽高，并让视频居中：

CSS

.hero{
  position: relative;
  z-index: 1;
  height: 90vh;
  width: 100%;
  overflow: hidden;
}

#myVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  filter: brightness(65%);
  transform: translate(-50%, -50%); /* 让视频居中显示 */
}

/* 容器宽高比大于16:9（宽屏）时，视频宽度填满容器，高度自适应 */
@media (min-aspect-ratio: 16/9) {
  #myVideo {
    width: 100%;
    height: auto;
  }
}

/* 容器宽高比小于16:9（竖屏/窄屏）时，视频高度填满容器，宽度自适应 */
@media (max-aspect-ratio: 16/9) {
  #myVideo {
    width: auto;
    height: 100%;
  }
}

关键说明 #

• overflow: hidden：确保视频超出父容器的部分被裁剪，避免出现滚动条或溢出
• object-fit: cover：现代浏览器实现背景视频适配的最优方案，无需复杂的媒体查询逻辑
• 媒体查询方案通过居中+比例适配，确保视频始终填满容器的一边，同时保持原始比例

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