CODEWITHSUNDEEP
imagecssflexbox
user3071261
user3071261

Reputation: 386

resize images with height flexbox

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

Upvotes: 4

Views: 3491

Answers (2)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14022

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.

Upvotes: 6

Kanstantsin Arlouski
Kanstantsin Arlouski

Reputation: 740

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>

Upvotes: 0

Related Questions