Блог

У меня есть несколько изображений, которые я хочу показать с помощью flexbox. Но изображения оставляют пробел, если следующее изображение не помещается в ту же строку.

Я хочу, чтобы эти изображения имели соответствующий размер, чтобы не осталось пробелов.

Пример:

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

Вам нужно будет добавить flex-grow: 1; в .ImageBlock

Это заставит блок расширяться.

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

Затем вам нужно будет img заполнить блок с помощью width: 100%;

Если вы не хотите, чтобы изображение растягивалось из пропорций, вы можете использовать object-fit: cover; .

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

Пример codepen: https://codepen.io/bj-rn-nyborg/pen/rNMVrVL