Размер фона в CSS: свойство background-size

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

background-size может принимать различные значения, такие как auto, cover и contain, а также конкретные размеры в пикселях(px) или процентах(%).

1. Значение "auto" используется по умолчанию и подразумевает сохранение исходного размера фонового изображения. То есть, картинка будет отображаться в своем естественном размере, вне зависимости от размеров элемента.
2. Значение "cover" масштабирует изображение таким образом, чтобы его ширина или высота покрывали всю площадь элемента, без искажения пропорций. Если соотношение сторон изображения не совпадает с соотношением сторон элемента, то одна сторона изображения будет обрезана. Например:

div {
  background-image: url('image.jpg');
  background-size: cover;
}

3. Значение "contain" масштабирует изображение таким образом, чтобы его ширина или высота была максимально вписана в размеры элемента, сохраняя пропорции. Это означает, что, возможно, изображение не будет заполнять целиком элемент, и по бокам или сверху/снизу останется пространство. Например:

div {
  background-image: url('image.jpg');
  background-size: contain;
}

Кроме того, можно использовать конкретные значения для установки размеров фонового изображения. Например:

div {
  background-image: url('image.jpg');
  background-size: 100px 200px; /* задаем ширину 100px и высоту 200px */
}

Также возможно использование процентов для задания размеров изображения относительно размеров элемента:

div {
  background-image: url('image.jpg');
  background-size: 50% 75%; /* задаем ширину 50% и высоту 75% от размеров элемента */
}

Изменять размер фонового изображения можно как в CSS-стилях, так и динамически с помощью JavaScript. Вот пример JavaScript-кода, который изменяет размер фонового изображения элемента при щелчке на него:

var element = document.getElementById("myElement");
element.addEventListener("click", function() {
  this.style.backgroundSize = "cover";
});

В данном примере, при щелчке на элемент с id "myElement", мы изменяем его background-size на "cover", что приводит к заполнению контейнера изображением, сохраняя при этом пропорции.

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