本文详解如何在 CSS Grid 布局中让视频元素完全贴合网格单元格（如 1920×1080），解决因默认缩放行为导致的居中留白、拉伸变形或错位问题，核心在于正确使用 object-fit 与容器定位策略。
本文详解如何在 css grid 布局中让视频元素完全贴合网格单元格（如 1920×1080），解决因默认缩放行为导致的居中留白、拉伸变形或错位问题，核心在于正确使用 `object-fit` 与容器定位策略。
在基于 CSS Grid 构建的响应式页面中，将视频作为背景层（z-index: -1）并严格匹配指定尺寸（如 1920×1080）是常见需求，但直接设置 width: 100%; height: 100% 往往无法达到预期效果——视频内容仍可能被“包含”（contain）而非“覆盖”（cover），导致四周留黑、比例失真或定位偏移。
根本原因在于：。即使容器尺寸精确设为 1920×1080，若未显式指定 object-fit，浏览器默认按 contain 渲染，即保持原始宽高比、完整显示画面，必然产生空白区域。
✅ 正确解法：启用 object-fit: cover 并配合 object-position
.main-container {
display: grid;
grid-template-columns: auto auto;
background-color: red;
box-sizing: border-box;
}
.main-container div {
color: black;
border: 1px solid black;
}
/* 关键修复：视频填充策略 */
.main-container .item1 video {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 拉伸/裁剪以完全覆盖容器 */
object-position: center; /* 居中对齐，避免关键内容被裁切 */
/* 注意：无需 top/left/right/bottom 或 position: absolute */
}
.item1 {
grid-column: 1 / 3;
background-color: green;
height: 1080px; /* 显式高度确保网格行高 */
}? 同时需注意 HTML 结构优化：
立即学习“前端免费学习笔记（深入）”；
- 视频应独占 .item1 容器，避免与其他文本内容（如示例中的 "1"）混排，否则会干扰盒模型计算；
- 移除内联的 width/height 属性（如
- 若需视频置于底层（z-index: -1），请确保 .item1 设置 position: relative，视频设置 position: absolute 并 z-index: -1 —— 但此时必须添加 inset: 0（等价于 top:0; right:0; bottom:0; left:0）以实现全尺寸定位：
.item1 {
grid-column: 1 / 3;
background-color: green;
height: 1080px;
position: relative; /* 为绝对定位提供参照 */
}
.item1 video {
position: absolute;
inset: 0; /* 替代 top/right/bottom/left 四值写法，更简洁 */
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
}⚠️ 注意事项：
- object-fit: cover 会裁剪视频边缘以维持宽高比，若需完整显示（如字幕区域），可改用 object-fit: fill（强制拉伸，可能变形）或 object-fit: contain（保留黑边）；
- 在移动端或小屏设备上，固定 height: 1080px 可能造成溢出，建议结合视口单位（如 min-height: 100vh）或媒体查询做响应式适配；
- 确保视频资源支持跨域（CORS），尤其本地开发时使用 localhost 路径需配置服务器头，否则可能触发静音/加载失败。
通过 object-fit 这一现代 CSS 属性，开发者得以精准掌控替换元素的内容渲染逻辑，彻底告别“视频不听话”的调试困境——它不仅是视频，也适用于 、
