本文详解如何用纯 CSS 实现全宽度视频的智能适配——在保持 100% 宽度的同时，当视频原始高宽比导致其高度超过视口（100vh）时，自动等比缩放并居中显示，避免滚动或溢出。
本文详解如何用纯 css 实现全宽度视频的智能适配——在保持 100% 宽度的同时，当视频原始高宽比导致其高度超过视口（`100vh`）时，自动等比缩放并居中显示，避免滚动或溢出。
在响应式网页开发中，全宽视频（full-width video）是常见需求，但单纯设置 width: 100%; height: 100%; object-fit: contain 并不能保证视频始终被约束在视口内——因为父容器 .video-row 的 max-height: 100vh 并不会主动限制子元素的渲染尺寸，而 height: 100% 在无明确高度上下文时会失效，最终导致视频溢出（如原问题中蓝色边框向下穿透红色容器边界）。
✅ 正确解法：结合容器查询（Container Queries）与容器相对单位（cqh），让视频高度直接响应其父容器的实时计算高度，而非依赖不确定的百分比继承。
以下是推荐的纯 CSS 解决方案（无需 JavaScript，兼容现代浏览器，Chrome 105+、Firefox 110+、Safari 16.4+ 已支持）：
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* 确保边框不破坏尺寸计算 */
}
.video-row {
border: 3px red dotted;
max-height: 100vh; /* 父容器最大高度 = 视口高度 */
container-type: inline-size; /* 启用内联方向容器查询（关键！）*/
/* 注意：旧写法 container:inline-size 已废弃，应使用 container-type */
}
.video {
border: 3px blue solid;
width: 100%;
height: 100cqh; /* 100% of the container's height —— 动态响应 */
object-fit: contain; /* 保持宽高比，完整显示，留黑边 */
display: block; /* 避免行内元素默认基线对齐导致的底部空白 */
}
<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>
? 关键原理说明：
-
container-type: inline-size声明父容器为「容器查询上下文」，使其子元素可使用cqw（容器宽度）、cqh（容器高度）等相对单位； -
height: 100cqh表示视频高度严格等于其父容器当前计算出的高度（该高度受max-height: 100vh限制，不会超过视口）； -
object-fit: contain确保视频在该固定高度内等比缩放并居中，自动添加左右黑边（letterboxing），完美实现“全宽 + 超高时缩放适配”的效果。
⚠️ 注意事项：
- 若需兼容不支持容器查询的旧浏览器（如 Chrome resize 并动态计算缩放比例，但本方案优先推荐现代 CSS 方案；
-
controls属性建议保留用于调试，上线时可根据 UX 需求移除或自定义控件； - 如视频需静音自动播放（如背景视频），请添加
muted autoplay loop并确保playsinline（iOS 兼容）； - 不要遗漏
box-sizing: border-box，否则边框会额外增加容器尺寸，干扰100cqh计算精度。
? 进阶提示：
若希望视频在缩放后仍铺满容器（即裁剪而非留黑边），可将 object-fit: contain 改为 object-fit: cover，此时视频会居中裁剪，适合强调视觉冲击力的场景；若需完全去除黑边且允许轻微变形，才考虑 object-fit: fill（不推荐，破坏原始比例）。
此方案简洁、语义清晰、性能优异，真正实现了“声明式响应”——你只需定义约束条件，浏览器自动完成尺寸适配，是现代 Web 布局的最佳实践之一。
