本文详解如何用纯 CSS 实现全宽视频的智能缩放：当视频原始宽高比导致其高度超过视口（100vh）时，自动等比缩小并居中显示，两侧留黑边；否则保持全宽铺满，无需 JavaScript 干预。核心采用现代 CSS 容器查询（Container Queries）与 cqh 单位精准控制。
本文详解如何用纯 css 实现全宽视频的智能缩放：当视频原始宽高比导致其高度超过视口（`100vh`）时，自动等比缩小并居中显示，两侧留黑边；否则保持全宽铺满，无需 javascript 干预。核心采用现代 css 容器查询（container queries）与 `cqh` 单位精准控制。
在响应式视频布局中，“全宽但不溢出视口”是一个高频需求——尤其适用于首页横幅、产品介绍或沉浸式背景视频。传统方案常依赖 JavaScript 监听窗口尺寸并动态计算缩放比例，不仅增加复杂度，还易引发重排与性能损耗。而现代 CSS 提供了更优雅、声明式的解法：容器查询（Container Queries）结合容器相对单位（如 cqh）。
✅ 正确思路：让视频高度响应其父容器的实际高度
原问题中失败的关键在于：.video-row 设置了 max-height: 100vh，但 .video 的 height: 100% 并未真正受限于该 max-height——因为 height: 100% 需要父元素有确定的高度（非 max-height），而 max-height 仅是约束上限，并不赋予“可继承的高度值”。
解决方案是绕过 height: 100% 的继承陷阱，直接使用容器查询长度单位 cqh（container query height），它表示当前容器高度的百分比，且会随容器实际渲染高度实时响应：
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* 关键：确保 border 不撑大尺寸 */
}
.video-row {
border: 3px red dotted;
max-height: 100vh; /* 视口高度硬性上限 */
container-type: inline-size; /* 启用容器查询（推荐写法，兼容性优于旧式 container:inline-size） */
}
.video {
border: 3px blue solid;
width: 100%;
height: 100cqh; /* ✅ 精准等于父容器当前渲染高度（非 max-height） */
object-fit: contain; /* 保持宽高比，居中显示，留黑边 */
display: block; /* 防止行内元素默认基线对齐产生的底部空隙 */
}
? 注意：
container-type: inline-size是当前标准写法（MDN 文档），部分旧教程中的container: inline-size已废弃。主流浏览器（Chrome 105+、Firefox 110+、Safari 16.4+）均已支持。
? 为什么 100cqh 比 100% 更可靠？
-
100%高度依赖父元素显式设定height值，而max-height不提供该值； -
100cqh则直接读取容器实际渲染后的高度（例如：当.video-row因max-height: 100vh被截断为800px时，100cqh = 800px），天然适配动态约束。
⚠️ 兼容性与降级建议
若需支持 Safari 16.3 或更早版本（不支持 cqh），可添加渐进增强 fallback：
.video {
height: 100%; /* 旧版 fallback（配合 JS 或媒体查询辅助） */
height: 100cqh; /* 覆盖旧版，现代浏览器生效 */
/* ...其余样式 */
}
同时，可通过 @container 查询进一步精细化控制（例如：仅当容器高度
@container (max-height: 600px) {
.video {
height: 100cqh;
}
}
✅ 最终效果验证
- 视频宽高比 > 16:9（如竖屏 9:16）→ 高度超
100vh→ 自动等比缩小，上下/左右留黑边，完全可见； - 视频宽高比 ≤ 16:9（如 16:9、4:3）→ 高度 ≤
100vh→ 全宽显示，无缩放，无滚动； - 所有操作纯 CSS，零 JS，无重排，性能最优。
此方案代表了现代 CSS 布局的演进方向：从“响应视口”转向“响应容器”，让组件真正具备独立、可复用的自适应能力。
