如何设置合并的CSS网格单元格（网格列）内部图像的最大高度？

Question

我一直在寻找一个解决方案，解决一个看起来非常简单的任务。有一个2x2的CSS网格。第一列是合并的，并且有一个图像。另外两行是流体的，包含一些文本。问题在于，图像会增加行的高度，并占用其原始大小的空间，而我正在尝试使文本行指定图像的最大高度。

所以现在它看起来像这样：

但我想要实现类似这样的效果：

我已经尝试了max-height、height、object-fit、grid-auto-column等属性，但似乎没有起作用。请给予建议。

以下是我的代码：

.container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.aside {
  grid-row: 1/3;
  grid-column: 1/2;
  background-color: pink;
}

.aside img {
  display: block;
}

.row1 {
  grid-row: 1/2;
  grid-column: 2/3;
  background-color: lightblue;
  padding: 15px;
}

.row2 {
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: lightgreen;
  padding: 15px;
}

<div class="container">
  <div class="aside">
    <img src="https://via.placeholder.com/350/" alt=""></div>
  <div class="row1">Donec euismod nisi ligula, vitae imperdiet eros egestas quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris ut sapien quis odio lobortis efficitur accumsan in massa. Pellentesque semper tempor consequat. Suspendisse potenti. Nullam condimentum, elit quis consectetur pulvinar, est augue fringilla libero, sed posuere dolor dolor vel ipsum. Pellentesque quis urna nunc. Maecenas quis posuere felis. Vestibulum id velit ante. Suspendisse ullamcorper tellus non velit facilisis, at molestie diam molestie. Nullam at efficitur sem. Vestibulum mollis massa id massa egestas hendrerit.</div>
  <div class="row2">Mauris consequat tincidunt ullamcorper. Sed nec massa nec mi porttitor efficitur quis nec ex. Nullam et porta leo, vel tempor eros. Aenean turpis lacus, pharetra et tristique et, consequat commodo ligula. Sed in nisi in ipsum dignissim ullamcorper. Sed et ipsum vitae ante mollis interdum at ut velit. Suspendisse potenti.</div>
</div>

- Mike

Answer 1

我认为没有一种纯CSS的方法可以实现这一点。

如果没有图像，min-content将是挤压行中所有额外空间的方法。

但由于图像是内容，min-content会尊重其大小。

我认为另一种提问方式可能是：

“如何让网格轨道忽略图像的大小？”

据我所知，这在纯CSS中是不可能的。也许有一些绝对位置的魔法。

此外，浏览器应该如何知道您更喜欢文本高度而不是图像高度？浏览器仅根据较高的内容设置高度。

- Michael Benjamin

Answer 2

您可以像以下这样近似表示它:

.container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.aside {
  grid-row: span 2;
  background-color: pink;
  /* added */
  height:0;
  min-height:100%;
  /**/
}

.aside img {
  display: block;
  /* added */
  width:100%;
  height:100%;
  object-fit:cover;
  /* */
}

.row1 {
  background-color: lightblue;
  padding: 15px;
}

.row2 {
  background-color: lightgreen;
  padding: 15px;
}

<div class="container">
  <div class="aside">
    <img src="https://via.placeholder.com/350/" alt=""></div>
  <div class="row1">Donec euismod nisi ligula, vitae imperdiet eros egestas quis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris ut sapien quis odio lobortis efficitur accumsan in massa. Pellentesque semper tempor consequat. Suspendisse potenti. Nullam condimentum, elit quis consectetur pulvinar, est augue fringilla libero, sed posuere dolor dolor vel ipsum. Pellentesque quis urna nunc. Maecenas quis posuere felis. Vestibulum id velit ante. Suspendisse ullamcorper tellus non velit facilisis, at molestie diam molestie. Nullam at efficitur sem. Vestibulum mollis massa id massa egestas hendrerit.</div>
  <div class="row2">Mauris consequat tincidunt ullamcorper. Sed nec massa nec mi porttitor efficitur quis nec ex. Nullam et porta leo, vel tempor eros. Aenean turpis lacus, pharetra et tristique et, consequat commodo ligula. Sed in nisi in ipsum dignissim ullamcorper. Sed et ipsum vitae ante mollis interdum at ut velit. Suspendisse potenti.</div>
</div>

相关问题以了解 height:0;min-height:100% : 如何将外部div的高度始终设置为特定内部div的高度？

- Temani Afif