I want to create a responsive image gallery using flexbox where each row has images scaled to equal height while preserving aspect ratio and not cropping.
To highlight what I mean here are some placeholder images of various dimensions and the styling I tried:
.art-container { display: flex; flex-wrap: wrap;}.art-item { border-color: red; border-style: solid;}.art-item>img{ min-height: 100%; width: auto;}<div class="art-container"><div class="art-item"> <img src='https://dummyimage.com/300x450/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/600x300/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/100x200/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/200x100/000/fff'></img></div><div class="art-item"> <img src='https://dummyimage.com/600x400/000/fff'></img></div></div>I used min-height: 100% and width: auto to scale all the images to the height of their row while preserving aspect ratio but this results in the image overflowing past its art-item container so the image gets cropped.