How to resize images to fill the row using css?

Question

I have multiple images which I want to show using flexbox. But the images leave a gap if the next image cannot fit in the same row.

I want these images to resize accordingly so that there is no gap left.

Example:

HTML:

<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>

CSS:

.ImageContainer{
    margin:40px;
    display: flex;
    flex-wrap: wrap;
}

.ImageBlock{
    margin:10px;
}

.ImageBlock img{
    max-height: 250px;
}

Answer 1

You will need to add flex-grow: 1; to the .ImageBlock

This will make the block expand.

.ImageBlock {
  margin: 10px;
  flex-grow: 1;
}

Then you will have to make the img fill the block with width: 100%;

If you don't want the image to stretch out of proportions, you can use object-fit: cover; .

.ImageBlock img {
  max-height: 250px;
  width: 100%;
  object-fit: cover;
}

Example codepen: https://codepen.io/bj-rn-nyborg/pen/rNMVrVL