I am facing an issue with displaying multiple images using flexbox. Whenever an image cannot fit in the same row, it leaves a gap which disrupts the layout.
https://i.sstatic.net/bXltY.jpg
My goal is to resize these images dynamically so that there are no gaps left between them.
For example:
https://i.sstatic.net/IhVCz.jpg
This is how the HTML structure looks like:
<div class="ImageContainer">
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/246/739/689/digital-digital-art-artwork-illustration-abstract-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/410/867/750/vector-forest-sunset-forest-sunset-forest-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg"
alt="">
</div>
<div class="ImageBlock">
<img src="https://c4.wallpaperflare.com/wallpaper/39/346/426/digital-art-men-city-futuristic-night-hd-wallpaper-thumb.jpg"
alt="">
</div>
</div>
Here is the CSS styling for achieving the desired effect:
.ImageContainer{
margin:40px;
display: flex;
flex-wrap: wrap;
}
.ImageBlock{
margin:10px;
}
.ImageBlock img{
max-height: 250px;
}