Адаптивная галерея с «резиной»
Давайте разберём, как построить галерею, с «резиной», адаптивностью и фиксированными пропорциями изображений.
Изображения будут плавно менять размер между брейкпоинтами, сохранять пропорции, а при достижении брейкпоинтов сетка галереи будет перестраиваться.
Зададим размеры картинок с помощью CSS. Установим для них ширину 200 пикселей.
Высоту зададим так, чтобы не нарушились пропорции. Используем стандартный приём нормализации картинок — height: auto; object-fit: contain;.
Добавим в разметку <div> с классом gallery__box.
С помощью этого контейнера построим сетку галереи на гридах. Благодаря гридам мы сможем быстро поменять раскладку и установить нужное количество столбцов.
Зададим разное количество столбцов в галерее в зависимости от ширины вьюпорта. Медиазапросы построим с помощью min-width. Чтобы добиться резинового поведения, используем fr для ширины столбцов.
Попробуйте изменить размеры окна мини-браузера и проверьте, что карточки перестраиваются.
Изображения в галерее должны быть квадратными вне зависимости от исходной формы изображений. Поэтому зададим для изображений CSS-свойство aspect-ratio со значением 1 / 1.
И изменим значение свойства object-fit c contain на cover. Отлично. Геометрия всех картинок стала одинаковой.
Следующая задача — сделать картинки резиновыми.
Поменяем значение ширины картинок 200px на 100%. Теперь картинки будут «тянуться» и изменять ширину вслед за контейнером, при этом сохранять квадратную форму.
Можете изменить ширину мини-браузера и посмотреть на полученный эффект.
Добавим gap размером 10px грид-контейнеру, чтобы изображения не слипались.
Адаптивно-резиновая галерея готова. Картинки тянутся при изменении ширины экрана, а на определённых брейкпоинтах сетка галереи перестраивается.
Напоследок поэкспериментируем с container queries.
Зададим контейнеру gallery фиксированную ширину, автоматические внешние отступы по горизонтали, добавим обводку.
С помощью свойства container объявим containment context для блока gallery. Подберём для контекста оригинальное имя — gallery.
Заменим обычные медиазапросы на запросы к контейнеру gallery. Стили внутри запросов к контейнеру теперь будут реагировать на ширину блока .gallery.
Добавим анимацию, которая плавно меняет ширину блока .gallery от 900px до 400px и обратно.
Анимация позволяет увидеть поведение адаптивно-резиновой галереи. Также можно заметить, что запросы к контейнеру работают. Если хотите лучше рассмотреть анимацию, измените масштаб в мини-браузере.
