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

Question

I've been trying to find a solution for quite a simple (on the first sight) task. There is a 2x2 css grid. And the first column is merged and there is an image inside. The other two rows are fluid and contain some text. The problem is that the image enlarges the height of the rows and takes up space for its original size, while I'm trying to make the text rows dictate the max-height for the image.

So now it looks like this:

But I'm trying to achieve something like this:

I've been trying max-height, height, object-fit, grid-auto-column etc properties on the image but nothing seems to work. Please advise.

Here is my code:

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

score 2 · Answer 1 · answered Sep 16 '21 at 02:54

I don't think there's a way to do this with pure CSS.

Without the image, min-content would be the way to squeeze all extra space out of the row.

But since the image is content, min-content respects its size.

I think another way to ask your question would be:

"How do you get grid tracks to ignore the size of images?"

Not possible with pure CSS, as far as I can tell. Perhaps some absolute position sorcery.

Also, how is the browser supposed to know that you prefer the text height over the image height? The browser is setting heights based simply on the taller content.

score 2 · Accepted Answer · answered Sep 16 '21 at 09:38

You can approximate it like below:

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

Related question to understand the height:0;min-height:100%: How can you set the height of an outer div to always be equal to a particular inner div?

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

2 Answers2