我们如何设置合并 css 网格单元（网格列）内的图像的最大高度

Question

我一直在尝试为相当简单（乍一看）的任务寻找解决方案。有一个 2x2 css 网格。并且第一列被合并，里面有一张图片。另外两行是流动的并且包含一些文本。问题是图像放大了行的高度并占用了 space 的原始大小，而我试图让文本行决定图像的最大高度。

所以现在看起来像这样：

但我正在努力实现这样的目标：

我一直在尝试图像上的最大高度、高度、对象适合、网格自动列等属性，但似乎没有任何效果。请指教

这是我的代码：

.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>

Answer 1

我认为没有办法用纯 CSS 来做到这一点。

如果没有图像，min-content 将是从行中挤出所有额外 space 的方法。

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

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

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

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

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

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%的相关问题：

我们如何设置合并 css 网格单元（网格列）内的图像的最大高度

How do we set max-height of an image that is inside merged css grid cells (grid column)

html

css

css-grid