无论内容大小如何，如何将 3x3 网格锁定到视口？

Question

我正在尝试为闭路电视摄像机流创建一个页面，该页面在 3x3 网格中显示 9 个流，使用完整的可用宽度和高度，无需滚动。流的分辨率不同，但我希望网格调整视频大小（忽略宽高比，视频播放器处理此问题），以便每个视频都可见。

到目前为止我已经有了这个，但我无法让网格调整视频元素的大小，因此所有内容都保留在视口中。

body {
  margin: 0;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}

.item {
  border: 2px solid red;
  background-color: blue;
}

.item video {
  width: 100%;
  height: 100%;
}

<div id="container">
  <div class="item">
    <video src="https://placehold.co/600x500.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
  <div class="item">
    <video src="https://placehold.co/600x400.mp4" />
  </div>
</div>

Answer 1

body {
  margin: 0;
}

#container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100vh;
}

.item {
  border: 2px solid red;
  background-color: blue;
  position: relative;
  overflow: hidden;
}

.item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

变化 *

1. 添加了网格模板行：repeat(3, 1fr);确保网格有 3 行。
2. 新增位置：相对；和溢出：隐藏；到要包含的 .item 类 网格项中的视频。
3. 添加了对象适配：覆盖；到 .item 视频类，以确保视频填充整个容器而不扭曲其纵横比。*