为什么不`width:100%; height:100%； object-fit: contain;` 让 <video> 适合它的容器？

Question

所以我有一个网格布局的页面，有页眉和页脚以及中间的黑色内容容器。

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: max-content 1fr max-content;
}

.container div {
  border: 1px solid red;
}

.videoContainer {
  background-color: black;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <div>This is the header</div>
  <div class="videoContainer">
  </div>
  <div>This is the footer</div>
</div>

到目前为止一切顺利。

现在我想放置一个可以拉伸以适合此容器（并居中）的视频。这是 object-fit: contain;

的尝试

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: max-content 1fr max-content;
}

.container div {
  border: 1px solid red;
}

.videoContainer {
  background-color: black;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <div>This is the header</div>
  <div class="videoContainer">
    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
  <div>This is the footer</div>
</div>

但是没有用。容器会扩展以适合视频，而不是让视频适合容器。

如何使容器保持其固有尺寸并使视频适合其容器？

Answer 1

1fr

首先你需要知道的是 1fr 等同于 minmax(auto, 1fr)，这意味着默认情况下容器不会小于其内容。

因此，首先将 1fr 替换为 minmax(0, 1fr)。这将解决溢出问题。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
}

.container div {
  border: 1px solid red;
}

.videoContainer {
  background-color: black;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <div>This is the header</div>
  <div class="videoContainer">
    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
  <div>This is the footer</div>
</div>

• 参考：

---

object-fit

如果您希望视频真正“适合这个容器”（如覆盖整个宽度和高度），请尝试 object-fit: cover 而不是 contain。