Масштабирование и растяжение фонового изображения в CSS

Быстрый ответ

Чтобы фоновое изображение идеально заполнило элемент, установите значение свойства background-size равным cover, выровняйте изображение по центру элемента и задайте свойство background-repeat в положение no-repeat.

.element {
  background: url('image.jpg') center/cover no-repeat;
}

Этот CSS-код гарантирует, что изображение полностью и без искажений заполнит элемент с классом .element.

Применение минимальных размеров: Сохраняем пропорции изображения

Установите min-width и min-height равными 100%, чтобы гарантировать полное покрытие элемента фоном. Обратите внимание, что из-за различия соотношения сторон часть изображения может быть обрезана.

Кроссбраузерность: поддерживаем старые версии

Команда background-size: cover; поддерживается большинством браузеров, но не забывайте о старых версиях. Для обеспечения совместимости используйте вендорные префиксы.

.element {
  -webkit-background-size: cover; /* Для Chrome и Safari */
  -moz-background-size: cover;  /* Для Firefox */ 
  -o-background-size: cover; /* Для Opera 12 */
  background-size: cover; /* Стандарт для других браузеров, включая IE9+ */
}

Для поддержки старых версий IE используйте следующий код:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')";

Подробнее об этом расскажет наш спикер на видео

Современные инструменты: дополнительная поддержка

Если CSS не справляется, Modernizr и jQuery могут прийти на помощь. Modernizr проверяет возможность использования background-size, а плагин imgsizer для jQuery позволяет управлять фоновыми изображениями на разных устройствах.

Соблюдаем пропорции: соотношение сторон

Если нужно сохранить пропорции фонового изображения при изменении масштаба, используйте значения "auto" для ширины или высоты. Но будьте аккуратны с min-width и min-height равными 100%, чтобы избежать нежелательного обрезания изображения.

Визуализация

background-size: cover; /* Малое фоновое изображение может красиво покрыть все пространство элемента */

background-size: contain; /* Очень большое изображение подгонится так, чтобы полностью поместится внутри элемента */

          🏞️ Зима (cover)                🏞️ Лето (contain)
До:       ⛄️🌲[-------]🌲⛄️          До:       🌞🌳[-------]🌳🌞
После:    🌲[🏞️🌲🌲🌲🏞️]🌲          После:    [🏞️🌳🌳🌳🏞️]

Полная ширина против полного покрытия: оценка задачи

Для отображения фона по всей ширине контейнера с сохранением пропорций используйте background-size: 100% auto;. Если требуется полное покрытие, установите background-size: 100% 100%.

Медиазапросы: управляем отзывчивостью

Чтобы адаптировать background-size под разные размеры экранов, используйте медиазапросы, чтобы достичь респонсивности фонового изображения.

Адаптивный дизайн: работаем с процентными размерами

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

Полезные материалы

1. background-size – CSS: Каскадные таблицы стилей | MDN — Детальное описание использования свойства CSS background-size.
2. CSS Multiple Backgrounds — Обзор возможностей использования многократных фонов в CSS3.
3. Perfect Full Page Background Image | CSS-Tricks — Пошаговый гид по созданию полноэкранного фонового изображения.
4. Aspect Ratio Boxes | CSS-Tricks — Руководство по сохранению соотношения сторон изображений.
5. A Complete Guide to Flexbox | CSS-Tricks — Полное руководство по flexbox, упрощающее создание адаптивных макетов.