resize images with height flexbox

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.