Блог

Главная - Вопросы по программированию - Сетка изображений CSS без использования object-fit: cover

Сетка изображений CSS без использования object-fit: cover

#html #css #image #grid #responsive

#HTML #css #изображение #сетка #отзывчивый

Вопрос:

В основном пытаюсь получить то, что есть в Adobe Stock и Shutterstock, а именно горизонтальную сетку кладки без изменения пропорций изображения с помощью подгонки объекта или любого другого растяжения.

Каждое решение использует object-fit: cover, что означает, что изображения обрезаны.

Мои изображения поступают из API, где все они имеют разные размеры.

Самое близкое, что у меня есть, это:

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

Но это дает некоторое растяжение изображений.

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

Комментарии:

1. Вы имеете в виду, что хотите, чтобы строка занимала любое количество вертикального пространства или была бы максимальной высотой, как у вас уже есть в вашем коде, это то, что вам нужно?

2. Я думаю, что лучшим решением было бы любое количество вертикального пространства до предела. Но я подумал, что не может быть предела, если конкретному изображению требуется много вертикального пространства, чтобы убедиться, что все остальное выровнено.

Ответ №1:

Я думаю, что здесь может помочь object-fit contain. Однако точно ли это выглядит «наилучшим образом», когда все изображения имеют одинаковую высоту или, например, увеличиваются до максимальной высоты, зависит от того, какой эффект в конечном итоге требуется.

Вот фрагмент, в котором каждому изображению присваивается максимальная высота (300 пикселей выбирается просто потому, что это было в коде вопроса, конечно, это может быть, скажем, 30vh или …). Также можно было бы присвоить каждому изображению высоту 300 пикселей, чтобы они были выровнены.

 #container {
    display: flex;
    flex-wrap: wrap;
}

.image {
    flex-grow: 1;
    margin: 2px;
    height: 300px;
    width: auto;
    max-width: 100%;
}

img {
    max-height: 300px;
    max-width: 100%;
    min-width: 100%;
    object-fit: contain;
} 
 <div id='container'>
    <div class='image'>
        <img src='https://via.placeholder.com/300x300.jpg' alt=''>
    </div>

    <div class='image'>
        <img src='https://via.placeholder.com/400x200.jpg' alt=''>
    </div>

    <div class='image'>
        <img src='https://via.placeholder.com/200x400.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/600x300.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/1024x768.jpg' alt=''>
    </div>
    <div class='image'>
        <img src='https://via.placeholder.com/150x150.jpg' alt=''>
    </div>
</div>