logo

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

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

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

CSS
Скопировать код
.element {
  background: url('image.jpg') center/cover no-repeat;
}

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

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

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

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

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

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

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

CSS
Скопировать код
-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%, чтобы избежать нежелательного обрезания изображения.

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

CSS
Скопировать код
background-size: cover; /* Малое фоновое изображение может красиво покрыть все пространство элемента */
CSS
Скопировать код
background-size: contain; /* Очень большое изображение подгонится так, чтобы полностью поместится внутри элемента */
plaintext
Скопировать код
          🏞️ Зима (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, упрощающее создание адаптивных макетов.