Изменение размера фоновых изображений с помощью background-size
Свойство background-size CSS позволяет изменять размер фонового изображения элемента, переопределяя поведение по умолчанию, при котором изображение отображается с полным размером и повторяется. Указав ширину и/или высоту изображения, можно масштабировать его в большую или меньшую сторону.
Повторение большого изображения
Рассмотрим большое изображение, логотип Firefox размером 2982x2808 пикселей. По какой-то причине (вероятно, связанной с ужасным дизайном сайта) мы хотим отобразить четыре копии этого изображения в элементе размером 300x300 пикселей. Для этого мы можем использовать фиксированное значение background-size в 150 пикселей.
HTML
<div class="tiledBackground"></div>
CSS
.tiledBackground {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}
Результат
Масштабирование изображения
Вы также можете указать горизонтальный и вертикальный размеры изображения, как показано ниже:
background-size: 300px 150px;
Результат будет выглядеть следующим образом:
Масштабирование изображения до большего размера
С другой стороны, можно увеличить масштаб изображения в фоне. Здесь мы масштабируем значок 32x32 пикселя до 300x300 пикселей:
.square2 {
background-image: url(favicon.png);
background-size: 300px;
width: 300px;
height: 300px;
border: 2px solid;
text-shadow: white 0px 0px 2px;
font-size: 16px;
}
Как можно заметить, CSS фактически идентичен, за исключением имени файла изображения.
Специальные значения: contain и cover
Помимо значений <length>, свойство CSS background-size предлагает два специальных значения размера: contain и cover. Давайте рассмотрим их.
contain
Значение contain указывает, что независимо от размера содержащей области, фоновое изображение должно быть масштабировано таким образом, чтобы каждая сторона была максимально возможной, но не превышала длины соответствующей стороны контейнера. Попробуйте изменить размер примера ниже, чтобы увидеть это в действии.
HTML
<div class="bgSizeContain"> <p>Try resizing this element!</p> </div>
CSS
.bgSizeContain {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: contain;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}
Результат
cover
Значение cover указывает, что размер фонового изображения должен быть минимальным, гарантируя, что обе размерности не меньше соответствующих размеров контейнера. Попробуйте изменить размер примера ниже, чтобы увидеть это в действии.
HTML
<div class="bgSizeCover"> <p>Try resizing this element!</p> </div>
CSS
.bgSizeCover {
background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
background-size: cover;
width: 160px;
height: 160px;
border: 2px solid;
resize: both;
overflow: scroll;
}
Результат
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
