My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques.
All the solutions I've found so far involve object-fit: cover, which crops the images.
The challenge I'm facing is that my images are sourced from an API and come in various sizes.
The closest solution I have tried is:
HTML:
<div id='container'>
<div class='image'>
<img src='' alt=''>
</div>
<div class='image'>
<img src='' alt=''>
</div>
<div class='image'>
<img src='' alt=''>
</div>
</div
CSS:
#container {
display: flex;
flex-wrap: wrap;
}
.image {
flex-grow: 1;
margin: 2px;
max-height: 300px;
}
img {
max-height: 300px;
max-width: 100%;
min-width: 100%;
vertical-align: bottom;
}
However, this approach results in some slight stretching of the images.
The ideal scenario would be for each row to dynamically adjust its height to accommodate the images while preserving their original aspect ratios.