How can I get a flexbox image item to maintain aspect ratio?

Question

OK I have looked at loads of different questions and answers on here (most flexbox questions I have found regarding aspect ratio appear to relate to using <div> elements instead of <ul><li>) but I cannot find the solution. When I try using <div>tags, the images don't stay on one line. They drop down the screen, which I do not want.

I have a row of 4 images and I want them to stay in a row no matter what size screen they are viewed on, but I don't want them to cause a horizontal scroll so I am using flexbox.

However, no matter what I try, the small screen shrinks the images width correctly, but the height does not shrink accordingly, so the images are distorted.

I have tried using flex-shrink: 1; for all items. I have tried using min-height: 0; and min-height: 1px;. I have also tried align-items: stretch; but none of these makes a difference. The height still won't reduce along with the width. here is my html code:

.flexbox-holder{
  padding: 0;
  margin: auto;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 1px;
}
.flexbox-item{
  overflow: hidden;
  flex-basis: 100%;
  max-width: 240px;
  min-width: 1px;
  height: 100%;
  max-height: 150px;
  min-height: 1px;
}

<ul class="flexbox-holder">
    <li class="flexbox-item"><img  src="images/service1.jpg" alt="service1"></li>
    <li class="flexbox-item"><img  src="images/service2.jpg" alt="service1"></li>
    <li class="flexbox-item"><img  src="images/service3.jpg" alt="service1"></li>
    <li class="flexbox-item"><img  src="images/service4.jpg" alt="service1"></li>
</ul>

Do the values of `max-height/-width` coincide with the images' aspect ratio? — collapsar, May 13 '20 at 09:05

score 0 · Accepted Answer · answered May 13 '20 at 09:45

Credits

Upvotes and any other form of appreciation are due to this SO answer. The solution only applies that technique to the OP example.

Solution

Use the object-fit CSS property on the img data as shown in the following snippet.

.flexbox-holder{
  padding: 0;
  margin: auto;
  list-style: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 1px;
}
.flexbox-item{
  overflow: hidden;
  flex-basis: 100%;
  max-width: 240px;
  min-width: 1px;
  max-height: 150px;
  min-height: 1px;
}

.flexbox-item img {
  border: solid 1px red;
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

<ul class="flexbox-holder">
    <li class="flexbox-item"><img  src="http://collapsar.bplaced.net/samples/png/240x150.black.png" alt="service1"></li>
    <li class="flexbox-item"><img  src="http://collapsar.bplaced.net/samples/png/240x150.black.png" alt="service2"></li>
    <li class="flexbox-item"><img  src="http://collapsar.bplaced.net/samples/png/240x150.black.png" alt="service3"></li>
    <li class="flexbox-item"><img  src="http://collapsar.bplaced.net/samples/png/240x150.black.png" alt="service4"></li>
</ul>

Thank you so much. I have upvoted the original answer. In searching for so many different ways of asking the question on here and in Google, I did not think to use the word "scale" in my search terms. Must be something to do with being a pensioner with an addled mind :-) — Tog Porter, May 13 '20 at 09:55

How can I get a flexbox image item to maintain aspect ratio?

1 Answers1