Адаптивная вёрстка фотографий с помощью Flexbox

Хотите узнать лёгкий способ вывести галерею изображений, разных размеров в виде адаптивных бесшовных блоков не использую JavaScript (типа masonry). Описанный в статье подход обеспечивает выравнивание от края до края, без неудобных промежутков - независимо от того, какие изображения (какого размера) вы добавляете.

Что самое интересное, он очень легкий, требует всего лишь неупорядоченного списка изображений и 17 строк CSS, работает на flexbox и object-fit.

Структура HTML

Поскольку мы имеем дело с серией изображений, неупорядоченный список (<ul>) имеет семантический смысл:

<ul>
  <li><img src="photo1.jpg" alt=""></li>
  <li><img src="photo2.jpg" alt=""></li>
  <!-- More images... -->
</ul>

Волшебство Flexbox

Вот идея, лежащая в основе решения:

1. Flexbox динамически регулирует ширину ячеек в зависимости от содержимого, что делает его идеальным для изображений со смешанным соотношением сторон.
2. Для обеспечения согласованности все изображения должны иметь одинаковую высоту.
3. object-fit: cover гарантирует, что изображения заполнят свои контейнеры без искажений.

Результат? Почти идеальная сетка с минимальными усилиями.

ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

li {
  height: 40vh;
  flex-grow: 1;
  list-style: none;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

Почему 40vh? Такая высота обеспечивает баланс: на рабочем столе отображаются два полных ряда изображений, а внизу — больше контента. Это также улучшает соотношение сторон, позволяя размещать больше фотографий в строке.

Исправление ошибки в последнем ряду

Flexbox слишком старается заполнить пространство, иногда неуклюже растягивая последнюю строку. Чтобы предотвратить это, мы добавляем пустой <li> в качестве разделителя:

<ul>
  <!-- Images... -->
  <li></li> <!-- Flexbox spacer -->
</ul>

И скорректировать css flex-grow

li:last-child {
  flex-grow: 10; /* Arbitrary but effective */
}

Настраиваем адаптивность галереи

Осталось несколько штрихов, чтобы наша галерея красиво выглядела на разных устройствах.

Портретный режим (высокие экраны)

Меньшее количество изображений в строке может привести к искажению соотношения сторон. Уменьшение высоты строки помогает:

@media (max-aspect-ratio: 1/1) {
  li { height: 30vh; }
}

Короткие экраны

На небольших устройствах (например, мобильных) более высокие ряды улучшают видимость:

@media (max-height: 480px) {
  li { height: 80vh; }
}

Узкие экраны

Телефоны в портретном режиме часто не могут вместить сразу несколько изображений, поэтому мы переключаемся на одну колонку:

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  ul { flex-direction: row; }
  li { height: auto; width: 100%; }
  img { max-height: 75vh; min-width: 0; }
}

Итого

Этот метод не безупречен — некоторые изображения могут быть слегка обрезаны, а последняя строка нуждается в доработке, — но его простота и адаптивность может быть преимуществом при ряде условий.

• Легко внедрить горизонтальную прокрутку
• Различное количество изображений
• При наличии проблем в соотношении сторон, flexbox всё компенсирует

Так же следует добавить атрибут loading="lazy" к тегу <img>, чтобы избежать проблем с весом страницы при загрузке, если ваша галерея будет расти. Желаю удачи!

Демо галерея

• 
• 
• 
• 
• 
• 
• 
•