Современный веб — это мир, где один и тот же сайт открывают на ноутбуке, смартфоне, планшете и огромном 4K-мониторе. И если верстка ещё кое-как переживает такие эксперименты, то изображения без правильной настройки быстро превращаются в главную боль интерфейса.
В этой статье разберёмся, что такое резиновые изображения, зачем они нужны, почему box-sizing не спасает, как правильно использовать calc() и чем принципиально отличаются контентные и фоновые изображения. Итак, поехали.
Что такое резиновые изображения
Резиновыми называют изображения, размеры которых зависят от размеров родительского блока. Проще говоря, картинка подстраивается под контейнер, а не живёт своей фиксированной жизнью в пикселях.
Чаще всего такие изображения адаптируются по ширине, реже — по высоте или сразу по обоим направлениям.
Почему box-sizing не помогает с изображениями
Свойство box-sizing часто воспринимают как «волшебную таблетку» от проблем с размерами. Но когда речь заходит об изображениях — оно почти бесполезно.
Что делает box-sizing
box-sizing управляет алгоритмом расчёта размеров элемента.
У него есть два основных значения:
- content-box (по умолчанию).
Браузер использует стандартную блочную модель.
width и height задают размер контента, а padding и border добавляются сверху. - border-box.
padding и border входят в width и height, и размеры задаются уже для всего блока целиком.
Почему это не решает проблему
Изображение (<img>) — это замещаемый элемент. Оно имеет собственные внутренние пропорции (intrinsic size), и box-sizing не управляет тем, как картинка масштабируется внутри контейнера.
👉 Вывод простой:
box-sizing полезен для layout, но для резиновых изображений он не решает задачу адаптации.
Функция calc(): когда размеры — это математика
CSS давно перестал быть «тупым». Одним из самых мощных инструментов стал calc().
Что такое calc()
calc() позволяет указывать вычисляемые значения для CSS-свойств, которые принимают размеры, числа, углы или время.
Если выражение не может быть вычислено — браузер просто игнорирует его.
Допустимые математические операции
В calc() можно использовать:
- Сложение: width: calc(20px + 20px);
- Вычитание: padding: calc(10% - 10px);
- Умножение: height: calc(20% * 2);
- Деление: width: calc(100% / 3);
❗ Делить на ноль запрещено.
❗ Знаки + и - обязательно должны отделяться пробелами.
Практика: центрируем элемент с помощью calc()
Классическая задача — поставить .popup строго по центру экрана.
Логика простая:
- Берём 50% ширины/высоты родителя;
- Вычитаем половину ширины/высоты самого блока.
Да, сегодня чаще используют Flexbox или Grid, но calc() по-прежнему полезен, когда нужны точные вычисления.
Контентные изображения
Контентные изображения — это изображения, которые несут смысловую нагрузку.
Примеры:
- Фотографии товаров;
- Иллюстрации в статье;
- Схемы, инфографика.
Для них используется HTML-тег:
<img src="image.jpg" alt="Описание изображения">
Важные атрибуты
- alt — альтернативный текст.
Критически важен для: доступности (screen readers), SEO, ситуаций, когда изображение не загрузилось. - title — необязательный.
Показывает подсказку при наведении курсора
Фоновые (декоративные) изображения
Фоновые изображения используются исключительно для оформления.
Если их скрыть — пользователь всё равно сможет воспринимать контент.
Задаются через CSS:
background-image: url(bg.jpg);
Хорошая практика
- Для текстовых блоков с фоном всегда задавайте background-color, чтобы сохранить читаемость при ошибке загрузки изображения.
- Для скрытия фонового изображения используйте универсальный способ:
background: none;
Работает во всех браузерах и не грузит картинку.
Как сделать изображение резиновым
Резиновое контентное изображение
Самый простой и правильный способ:
Пример:
👉 Картинка уменьшается, если контейнер меньше неё,
👉 но не увеличивается, если контейнер больше.
Почему нельзя использовать width: 100%
На первый взгляд кажется логичным:
Но это опасно ❌
Если исходный размер изображения меньше родительского блока, браузер растянет картинку, и она потеряет качество.
📌 Правило:
- max-width: 100% — безопасно;
- width: 100% — риск ухудшения качества.
Резиновые фоновые изображения и background-size
Для фоновых изображений используется свойство:
background-size
Оно определяет, как масштабируется фоновая картинка относительно родительского блока.
Автоматическая высота
background-size принимает два значения:
- Ширина;
- Высота.
Если указать только одно значение, второе автоматически станет auto — пропорциональным соотношениям сторон изображения.
background-size: 100%;
Центрирование фонового изображения
Чтобы изображение выглядело аккуратно, его обычно центрируют:
background-position: center;
Или более явно:
background-position: center center;
Проценты в background-size
Можно использовать проценты вместо пикселей:
background-size: 100% auto;
Проценты считаются от размеров родительского блока:
- Первое значение — ширина;
- Второе — высота;
- Если второе не задано — оно равно auto.
Это делает фон действительно резиновым.
Итоги
Принцип расчёта размеров элемента
- Браузер использует блочную модель, в которой участвуют:
width, height, padding, border, margin. - Фактический размер элемента — это сумма всех этих значений.
- width и height задают размер контента, а не всего блока.
box-sizing
- content-box — стандартная модель;
- border-box — padding и border входят в width и height;
- Удобно для layout, но не решает адаптацию изображений.
Функция calc()
- Позволяет выполнять математические операции в CSS;
- Поддерживает +, -, *, /;
- Деление на ноль запрещено;
- Некорректные выражения игнорируются.
Контентные изображения
- Используются для передачи важной информации;
- Добавляются через <img>;
- Атрибут alt обязателен для доступности.
Фоновые изображения
- Используются в декоративных целях;
- Задаются через CSS;
- Для скрытия применяется background: none;
- Желательно указывать background-color.
Резиновые изображения
- Их размеры зависят от родительского блока;
- Для <img> используется max-width: 100%;
- width: 100% может привести к ухудшению качества;
- Для фона применяется background-size и background-position.
Заключение
Резиновые изображения — это не просто «модный приём», а необходимость в адаптивной вёрстке. Понимание различий между контентными и фоновыми изображениями, аккуратное использование max-width, background-size и calc() позволяет создавать интерфейсы, которые выглядят одинаково хорошо на любых экранах.
Хороший фронтендер управляет не только блоками, но и тем, как контент дышит внутри них. И изображения — важная часть этого дыхания.
Полезные ресурсы:
Сообщество дизайнеров в VK:
https://vk.com/grafantonkozlov
Канал на Дзен:
https://dzen.ru/grafantonkozlov
Телеграмм канал сообщества:
https://t.me/grafantonkozlov
Премиум контент:
https://dzen.ru/grafantonkozlov?tab=premium