如何实现全宽视频自动缩放适配视口高度（含容器查询方案）-html教程-PHP中文网

如何实现全宽视频自动缩放适配视口高度（含容器查询方案）

本文详解如何用纯 CSS 实现全宽视频在高度超视口时自动等比缩放并居中显示，避免溢出滚动，重点引入现代 CSS 容器查询（cqh 单位）替代传统 vh 陷阱，兼顾响应性与兼容性。

本文详解如何用纯 css 实现全宽视频在高度超视口时自动等比缩放并居中显示，避免溢出滚动，重点引入现代 css 容器查询（`cqh` 单位）替代传统 `vh` 陷阱，兼顾响应性与兼容性。

在构建全屏视频横幅、登录页背景或沉浸式内容模块时，一个常见需求是：视频必须铺满容器宽度（100%），但当其原始宽高比导致高度超过视口（100vh）时，需自动等比缩放，保持完整可视，且不触发页面滚动。看似简单，但仅靠 object-fit: contain + height: 100% 往往失效——原因在于父容器 .video-row 的 max-height: 100vh 并不会“约束”子元素的计算高度，而 height: 100% 在无明确高度上下文时行为不可控，最终导致视频溢出。

✅ 正确解法：容器查询（Container Queries）+ `cqh` 单位

现代 CSS 提供了更精准的尺寸控制机制：容器查询（Container Queries）。它允许元素根据自身父容器的实际尺寸动态调整样式，而非依赖整个视口。关键在于使用 cqh（container query height）单位——它表示父容器当前高度的百分比，且会随容器尺寸变化实时响应。

以下是推荐的纯 CSS 解决方案：

<div class="video-row">
  <video class="video" controls><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source></video>
</div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* 确保边框计入尺寸计算 */
}

.video-row {
  border: 3px red dotted;
  max-height: 100vh;        /* 父容器最大高度 = 视口高度 */
  container-type: inline-size; /* 启用内联方向容器查询（必需） */
  /* 注意：部分浏览器需写为 container: inline-size; */
}

.video {
  border: 3px blue solid;
  width: 100%;               /* 全宽拉伸 */
  height: calc(100cqh - 6px); /* 高度 = 父容器当前高度 - 边框总高度（3px×2） */
  object-fit: contain;       /* 等比缩放，完整显示，留黑边 */
  display: block;            /* 消除行内元素默认基线间隙 */
}

? 为什么 100cqh 有效？
cqh 是相对于当前容器实际渲染高度的单位。当 .video-row 因 max-height: 100vh 被限制时，100cqh 即等于该限制值（如 720px），calc(100cqh - 6px) 精确扣除上下边框，确保视频内容严格包裹在容器内，彻底解决溢出问题。

⚠️ 兼容性与降级建议

✅ 支持情况：Chrome 105+、Edge 105+、Firefox 110+、Safari 16.4+ 已原生支持容器查询。Can I use: container-query

? 旧浏览器降级方案（如需支持 IE 或旧版 Safari）：

.video {
  /* 基础 fallback：强制按视口高度缩放（可能轻微裁切） */
  height: 100vh;
  object-fit: cover; /* 或使用 contain，但需配合 JS 动态计算 */
}

或搭配轻量 JavaScript 监听容器尺寸变化：

const row = document.querySelector('.video-row');
const video = document.querySelector('.video');

const resizeObserver = new ResizeObserver(() => {
  const h = row.clientHeight;
  video.style.height = `${h - 6}px`; // 减去边框
});
resizeObserver.observe(row);

? 关键总结

❌ 错误思路：height: 100% + max-height: 100vh 无法联动约束子元素高度；object-fit 不改变元素盒模型尺寸。
✅ 正确核心：用 container-type: inline-size 启用容器查询，以 cqh 单位实现父容器驱动的高度响应。
? 最佳实践：width: 100% + height: calc(100cqh - [border]) + object-fit: contain 组合，零 JS、高精度、语义清晰。
? 扩展提示：若需视频始终填满（无黑边），可将 object-fit: contain 改为 cover，但注意可能裁剪边缘内容。