Свойство background-size

Описание

Масштабирует фоновое изображение, согласно заданным размерам.

Синтаксис

background-size:  [ размер | проценты | auto ] {1,2} | cover | contain;
Значение Описание
размер Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
% Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#im-t2 {
background-image: url('/files/images/regular/shar2.png');
background-color: #93c1f7 !important;
background-repeat: no-repeat;
height: 100%;
width: 80vw;
background-size: cover;
}
</style>
<div class='von2'>
<div id='im-t2'></div>
</div>
</body>
</html>

Читайте также