html - 为什么不`width：100％; 高度：100%；对象适配：包含；` 做一个适合它的容器？

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>

• 参考：为什么 minmax(0, 1fr) 对长元素有效而 1fr 无效？

---

object-fit

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