resize images with height flexbox - image

Question

I have a column with images. The column has a limited height and I want that all the images fit in the column vertically. Is this possible? I'm trying it with flexbox, but didn't succeed yet.
.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: auto;
}
<div class="zoom__images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
</div>
Best wishes

Answer 1

This will work if you want to take equal size for your images
For flex-items to shrink less than their size you need to set flex-basis: 0; and min-height: 0. Default values of min-height: auto and flex-basis: auto; can prevent flex-items from shrinking less than their size. flex-grow: 1 makes items grow to take equal values. But img as flex-items don't resize to preserve aspect ratio, so we'll have to wrap them. Demo:
.zoom__images {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.zoom__images > * {
flex: 1 0 0;
min-height: 0;
display: flex;
}
.zoom__images img {
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
<div class="zoom__images">
<div><img src="https://placehold.it/200x300/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/100x100/a00/fff"></div>
<div><img src="https://placehold.it/400x600/a00/fff"></div>
</div>
You can also add overflow: hidden for .zoom__images > * for images not overflowing .zoom__images. This won't make it look as in other browsers but look will be much better.

Answer 2

Try using CSS calc() method. calc(100/Number of images in container) will resize your images' height to share 100% of your container height, which will be divided evenly among all images.
.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: calc(100%/4);
}
<div class="zoom__images">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
</div>