Prevent image from expanding beyond other elements of flex row

Question

I am trying to build a card-based layout, with an image taking up the left-hand half of each card. If I use a div with a background-image, the image takes up exactly half the width, and expands to exactly the height of the content on the right-hand side of the card.

However, if I instead use an img element (with object-fit: cover), the image never crops vertically when the card is too short, but instead only horizontally when the card is too tall. How can I tell the image not to cause the card to stretch, reproducing the behaviour of the div's background image?

As an example, the third and fourth cards are what I am trying to achieve, but with an image tag for semantic reasons.

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}

article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
  margin: 1em;
}

article > img {
  object-fit: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

article > div:first-child {
  background-position: center;
  background-size: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

article > aside {
  padding: 1em;
}

<main>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
</main>

you have almost done it. You added an extra div to use the background, simply add your image inside that div instead of add it as background — Temani Afif, Jun 06 '19 at 10:17
@TemaniAfif would you be able to provide an example? I'm still finding very similar results when I put the `img` in a `div`. — Charlie Harding, Jun 06 '19 at 10:26
From further experimenting, I can position the image absolutely (width and height to 100%), with this parent div positioned relatively, but is this really the most elegant way of doing so? — Charlie Harding, Jun 06 '19 at 10:39
*most elegant* is opinion based, for me it works and it's a solution. — Temani Afif, Jun 06 '19 at 10:44

Mileesh M S · Answer 1 · 2019-06-06T10:59:23.403

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}

article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
  margin: 1em;
}

article > img {
  object-fit: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

article > div:first-child {
  background-position: center;
  background-size: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}

article > aside {
  padding: 1em;
}
.img-container{
  border:2px solid red;
  overflow:hidden;
  position:relative;
}
.img-container div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.img-container img{
      object-fit: cover;     
      width:100%;
      height:100%;
}

<main>
  <article>
   <div class="img-container">
   <div>
    <img src="https://picsum.photos/id/411/1000/900" />
    </div>
    </div>
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
  <div class="img-container">
    <img src="https://picsum.photos/id/411/1000/900" />
    </div>
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
</main>

Use object-fit: cover; width:100%; height:100%;. You need to specify width and height with "object-fit: cover" to achieve this.

Hi Mileesh, this doesn't seem to answer the question: the first image still extends beyond the text. — Charlie Harding, Jun 06 '19 at 10:45
In which browser you are testing?. It is working fine in Chrome 74.0.3729.169 — Mileesh M S, Jun 06 '19 at 10:48
Thanks Mileesh. I've accepted @TemaniAfif's solution, as he posted a working answer first, and it seems to be the same idea, but thank you! — Charlie Harding, Jun 06 '19 at 11:05

Temani Afif · Accepted Answer · 2019-06-06T11:05:42.727

You can simply make the image out of the flow using position:absolute so only the text content will define the height:

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}

article {
  /*display: flex;
  flex-direction: row; not needed sine one element is in-flow */
  border: 1px solid;
  margin: 1em;
  position:relative;
}

article > img {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  object-fit: cover;
}


article > aside {
  padding: 1em;
  width:50%;
  margin-left:auto;
  box-sizing:border-box;
}

<main>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>

Similar question: How can you set the height of an outer div to always be equal to a particular inner div?

Prevent image from expanding beyond other elements of flex row

2 Answers2

Linked