Resize images with flexbox height
I have a column with images. The column has a limited height and I want all images to fit the column vertically. Is it possible? I have been trying to do this with flexbox but have failed so far.
.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>
Regards
source to share
This will work if you want to get equal size for your images
For flexible items smaller than their size, you need to set flex-basis: 0;
and min-height: 0
. The defaults min-height: auto
and flex-basis: auto;
can prevent flex items from shrinking smaller than their size. flex-grow: 1
makes the elements grow with equal values. But img
how flex items don't resize to keep the aspect ratio, so we'll have to wrap them. Demo video:
.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 overcrowded .zoom__images
. It won't look like it does in other browsers, but the look and feel will be much better.
source to share
Try using CSS calc () method. calc (100 / Number of images in container) will resize the height of your images to split 100% of your container's height, which will be evenly spaced across 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>
source to share