CSS网格：图片高度溢出

Question

我有一个简单的 CSS 网格，其中包含 2 列（60%、40%）。第一个充满了图片。当图片有足够的高度时，图片会很好地包含在网格中。

问题是当高度不够时，图片会溢出高度。
我希望它留在网格内并填充任何 window 大小。

代码如下：

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100vh;
  border: 2px solid red;
}

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

<div class="container">
  <img class="picture" src="https://i.pinimg.com/550x/e4/7e/00/e47e006f1cf838ccf5468e8548a7577c.jpg">
  <p class="text">Some text</p>
</div>

这是一个 JSFiddle： https://jsfiddle.net/f4us5krq/1/

Answer 1

您可以将容器的高度设置为 100%，这样图片就会适合容器。如果您仍想使用 height: 100vh;

，可以在 .picture 上尝试 overflow: hidden;

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100vh;
  border: 2px solid red;
}

.picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

<div class="container">
  <img class="picture" src="https://i.pinimg.com/550x/e4/7e/00/e47e006f1cf838ccf5468e8548a7577c.jpg">
  <p class="text">Some text</p>
</div>

Answer 2

将 width 和 height 更改为 inherit。添加最大值 width/height 以在网格太紧时停止溢出。

.container {
  display: grid;
  grid-template-columns: 60% 40%;
  height: 100vh;
  border: 2px solid red;
}

.picture {
  object-fit: cover;
  height: inherit;
  width: inherit;
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <img class="picture" src="https://i.pinimg.com/550x/e4/7e/00/e47e006f1cf838ccf5468e8548a7577c.jpg">
  <p class="text">Some text</p>
</div>

P.S 你也可以尝试 object-fit: contain

CSS网格：图片高度溢出

CSS Grid: Picture overflow in height

html

css

css-grid