Современный веб давно перестал быть статичным. Пользователи заходят на сайты с телефонов, планшетов, ноутбуков и ультрашироких мониторов — и на каждом устройстве интерфейс должен выглядеть корректно, быстро загружаться и оставаться удобным.
Именно здесь на сцену выходят адаптивные изображения — не просто картинки, а гибкие элементы интерфейса, которые подстраиваются под контекст, размеры контейнера и возможности устройства.
В этой статье разберём, как Flexbox помогает управлять растягиванием и сжатием изображений, зачем нужен тег picture, как работают flex-grow, flex-shrink, flex-basis, order и почему calc() с относительными единицами — важный инструмент в адаптивном дизайне.
Что такое адаптивные изображения
Адаптивные изображения — это изображения, которые:
- Меняют размер в зависимости от контейнера и экрана;
- Могут подгружаться в разных разрешениях;
- Корректно ведут себя во flex- и grid-раскладках;
- Не ломают интерфейс при сжатии или растяжении.
Важно понимать: адаптивность — это не только max-width: 100%, а комплексный подход, включающий CSS, Flexbox и HTML-инструменты.
Flexbox и изображения: растягивание и сжатие
Изображения почти всегда находятся внутри flex-контейнеров: карточки, списки, галереи, шапки, поисковые строки. Поэтому ключевую роль играют свойства Flexbox.
flex-shrink — управление сжатием
Свойство flex-shrink задаёт коэффициент гибкого сжатия элемента при нехватке места в контейнере.
Синтаксис
flex-shrink: <номер>;
- <номер> — целое число ≥ 0;
- значение по умолчанию: flex-shrink: 1.
Как это работает
- flex-shrink: 1 — элемент может сжиматься (поведение по умолчанию);
- flex-shrink: 0 — элемент никогда не сжимается, сохраняя исходный размер.
Это особенно важно для изображений: иконки, кнопки или превью могут терять читаемость при сжатии.
Запрещаем сужение элементов
Частая задача — запретить сжатие вспомогательных элементов рядом с изображением.
После удаления размеров в процентах и явного запрета сжатия элементы сохраняют форму, а гибкость берёт на себя основной контент.
flex-grow — управление растягиванием
Если flex-shrink отвечает за сжатие, то flex-grow — за растягивание элементов при увеличении контейнера.
Синтаксис
flex-grow: <номер>;
- значение по умолчанию: flex-grow: 0
Поведение
- flex-grow: 0 — элемент не растягивается;
- Одинаковые значения flex-grow → элементы равного размера;
- Если один элемент flex-grow: 2, а остальные 1, он займёт в два раза больше пространства.
Это идеально подходит для адаптивных изображений внутри карточек или форм, где изображение должно заполнять доступное место.
flex-basis — базовый размер элемента
flex-basis определяет начальный размер элемента вдоль главной оси.
Возможные значения
- Любое значение ширины (px, %, rem, vw и т.д.);
- auto — размер определяется контентом (значение по умолчанию).
Важно:
Если указать flex-basis, именно оно определяет размер элемента, а не width.
flex-basis решает
Если главная ось направлена слева направо:
- flex-basis задаёт ширину;
- width учитывается только если flex-basis: auto.
👉 Вывод:
width имеет смысл для flex-элементов только при flex-basis: auto.
flex-basis — не фиксированная ширина
flex-basis не фиксирует размер намертво.
Если суммарная ширина элементов больше контейнера,
Flexbox:
- Начнёт сжимать элементы (если flex-shrink ≠ 0);
- Перераспределит пространство.
То же самое справедливо и для height, если используется:
flex-direction: column;
Шорткат flex
Три свойства:
- flex-grow;
- flex-shrink;
- flex-basis.
можно записать одной строкой:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Основные значения
flex: auto
Эквивалент:
flex: 1 1 auto;
Элемент полностью гибкий и занимает всё доступное пространство.
flex: 0 auto
Эквивалент:
flex: 0 1 auto или flex: initial # значение по-умолчанию
Элемент не растягивается, но может сжиматься.
flex: <номер> (самая часто используемая запись)
Эквивалент:
flex: <номер> 1 0px;
Растягивается пропорционально коэффициенту.
flex: none
Эквивалент:
flex: 0 0 auto;
Элемент полностью негибкий — не сжимается и не растягивается.
order — меняем порядок элементов
Для адаптивных интерфейсов часто нужно поменять порядок элементов на мобильных устройствах.
Синтаксис
order: <номер>;
- Значение по умолчанию: 0;
- Чем меньше число — тем раньше элемент в потоке;
- Порядок меняется без изменения HTML.
Это удобно для изображений: например, на мобильных сначала текст, а картинка — ниже.
Адаптивные изображения и тег picture
Flexbox управляет размерами, а picture — выбором изображения.
Тег picture
Сам по себе не имеет атрибутов — это контейнер.
Вложенный source
- srcset работает так же, как у img;
- media задаёт условие выбора изображения.
Обязательный img
Тег img — фоллбэк для старых браузеров, которые игнорируют picture.
Так же обязателен тег img c alt для скринридера (от англ. screen reader — «читатель экрана») — программы, которая преобразует текстовую информацию на экране в речь или в тактильные сигналы.
calc() и относительные единицы
Для плавной адаптации размеров можно использовать calc() с vw.
Пример формулы
font-size: calc(3.125vw + 10px);
Как браузер считает
- Вычисляет 1vw в пикселях;
- Умножает на коэффициент;
- Прибавляет фиксированное значение.
Это по сути формула:
y = ax + b, где y — font-size, x — 1vz в пикселях. Коэффициенты a и b зависят от того, какой размер шрифта нам необходим при той или иной ширине экрана. И при изменении параметров экрана, например, высоты или ширины, эта функция сама по введённой формуле в коде, всё пересчитает в автоматическом режиме, получив новые параметры.
Округление пикселей
Физический пиксель — это «лампочка».
Невозможно отобразить 3.5px, поэтому браузеры всегда округляют значения.
Важно:
- Округление может отличаться между браузерами;
- Возможны микросмещения на разных устройствах;
- Смещение — это нормально и неизбежно.
Итоги
Адаптивная вёрстка и работа с изображениями напрямую зависят от грамотного использования Flexbox и современных CSS-инструментов.
Flexbox даёт полный контроль над поведением элементов в контейнере:
- flex-shrink отвечает за сжатие элементов при нехватке пространства — по умолчанию элементы могут уменьшаться, но это поведение можно полностью запретить.
- flex-grow управляет растягиванием элементов при увеличении контейнера и позволяет равномерно или пропорционально распределять свободное пространство.
- flex-basis задаёт базовый размер элемента вдоль главной оси и имеет приоритет над width и height, при этом не фиксируя размер жёстко.
- Все три свойства объединяются шорткатом flex, упрощая и делая наглядной настройку гибкости элементов.
- order позволяет менять визуальный порядок элементов без изменения HTML, что особенно важно для адаптивных и мобильных версий.
Адаптивные изображения реализуются не только через CSS, но и средствами HTML:
- тег picture позволяет подставлять разные изображения в зависимости от условий экрана;
- source с атрибутами srcset и media задаёт правила выбора изображения;
- Обязательный тег img с alt, который обеспечивает обратную совместимость со старыми браузерами. А так же обязателен для скринридера (от англ. screen reader — «читатель экрана») — программы, которая преобразует текстовую информацию на экране в речь или в тактильные сигналы.
Функция calc() с относительными единицами (vw) позволяет плавно изменять размеры элементов, например шрифтов, при изменении ширины экрана. При этом важно учитывать, что браузеры всегда округляют дробные значения пикселей, и результат может немного отличаться в разных средах.
В совокупности эти инструменты позволяют создавать по-настоящему гибкие, устойчивые и адаптивные интерфейсы, в которых изображения и контент корректно выглядят на любых устройствах и разрешениях.
Заключение
Адаптивные изображения — это не только выбор правильного формата или разрешения. Это:
- Грамотное использование Flexbox;
- Контроль растягивания и сжатия через flex-grow и flex-shrink;
- Понимание роли flex-basis;
- Умение менять порядок элементов через order;
- Использование picture для разных экранов;
- Расчёт размеров через calc() и относительные единицы.
Когда все эти инструменты работают вместе, изображения перестают быть проблемой и становятся гибкой частью интерфейса, которая идеально вписывается в любой экран.
Полезные ресурсы:
Сообщество дизайнеров в VK:
https://vk.com/grafantonkozlov
Канал на Дзен:
https://dzen.ru/grafantonkozlov
Телеграмм канал сообщества:
https://t.me/grafantonkozlov
Премиум контент: