'How can I fit images with varying sizes in a flex row?

My understanding of flex is that this;

<div class="flex-container">
   <img src="image-1">
   <img src="image-2">
   ...
   <img src ="image-n">
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container img {
     flex-shrink: 1;
   }
</style>

with random number of random sized images should produce a block of images of width 100% of its parent with the images reduced in size proportionally to fit. I don't want to wrap the items.

The result of the above is either an overflow of the container or distorted images with varying results depending on setting max- or min-height styles on parent or children.

My understanding is obviously wrong. But why?

I have added the snippet below, in Chrome the images fit the box but are distorted, in Firefox they spill out of the box.

cssflexbox


Solution 1:[1]

If you want your image to keep ratio, add align-items: flex-start; to your container.

"The default for the css "align-items" property is "stretch" which is what is causing your images to be stretched to its full original height. Setting the css "align-items" property to "flex-start" fixes your issue."

Or you set each image into a container (with display:block;).

if you want your image to break and go to the next line just add flex-wrap:wrap; to your container.

.flex-container {
   display: flex;
   justify-content: space-between;
   /* ADDED */
   align-items: flex-start;
   /*flex-wrap:wrap;*/
}
.flex-container img {
   flex-shrink: 1;
}
<div class="flex-container">
   <img src="https://dummyimage.com/600x400/000/fff">
   <img src="https://dummyimage.com/200x600/e31da8/000">
   ...
   <img src ="https://dummyimage.com/60x40/000/fff">
</div>

Solution 2:[2]

Setting the images to display: block is not sufficient. They need to be enclosed.

Thanks to Adriano for the comment suggestion.

<div class="flex-container">
   <div>
     <img src="image-1">
   </div>
   <div>
   <img src="image-2">
   </div>
   ...
   <div>
    <img src ="image-n">
   </div> 
</div>

<style>
   .flex-container {
     display: flex;
     justify-content: space-between;
   }
   .flex-container div {
     flex-shrink: 1;
   }
   .flex-container div img {
     width: 100%;
     height: auto;
   }
</style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 isherwood

Related Questions