本文介绍如何使用 CSS Grid 和 object-fit 精确控制九宫格视频布局，确保其严格占据整个视口（100vh × 100vw），无论视频原始分辨率如何，均自适应缩放并完整可见。
本文介绍如何使用 css grid 和 `object-fit` 精确控制九宫格视频布局，确保其严格占据整个视口（100vh × 100vw），无论视频原始分辨率如何，均自适应缩放并完整可见。
要实现一个稳定、无滚动、全屏适配的 3×3 CCTV 视频监控网格，关键在于视口级尺寸控制、子项空间隔离与媒体内容安全渲染三者的协同。仅依赖 width: 100%; height: 100% 在 Grid 子项中往往失效，因为默认情况下 .item 的高度由内容撑开，而 video 的宽高百分比在非定位元素中可能无法正确解析为父容器尺寸。
✅ 正确解法包含三个核心要点：
-
强制网格行列等分视口：显式声明
grid-template-rows: repeat(3, 1fr)，避免浏览器因未定义行高而按内容计算导致高度溢出； -
重置盒模型与边距：全局设置
* { margin: 0; box-sizing: border-box; }，确保2px边框不额外增加尺寸，所有 padding/border 均计入100%宽高内； -
视频绝对定位 + object-fit 控制缩放行为：将
video设为position: absolute并铺满其父.item（需.item设position: relative），再通过object-fit: contain保证视频完整可见（居中显示，留黑边）；若需填满无空隙，则改用object-fit: cover（注意可能裁剪边缘）。
以下是完整可运行代码：
* {
margin: 0;
box-sizing: border-box;
}
#container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 100vw;
height: 100vh;
}
.item {
border: 2px solid red;
background-color: #0a2540;
position: relative;
}
.item video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 或 cover — 根据是否允许裁剪选择 */
background-color: #1a1a2e;
}
⚠️ 注意事项：
- 所有
<video></video>标签必须闭合（如<video src="..." autoplay muted></video>），否则部分浏览器可能不触发渲染； - 若视频需自动播放，务必添加
muted属性（现代浏览器策略限制）； -
object-fit仅作用于替换元素（如<img>、<video></video>），对普通块元素无效； - 如遇移动端缩放异常，建议在
中加入响应式元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">。
该方案已验证兼容 Chrome、Firefox、Edge 及 Safari（iOS 16.4+），适用于实时流媒体页面部署，兼顾稳定性与视觉一致性。
