Вы можете использовать CSS-свойство background-size: cover; для растягивания и масштабирования фонового изображения. Оно масштабирует изображение как можно больше таким образом, чтобы фоновая область полностью покрывалась фоновым изображением, сохраняя при этом его внутреннее соотношение сторон.
Однако часть изображения может быть не видна (обрезана по вертикали или горизонтали), если ширина или высота измененного фонового изображения слишком велика для элемента.
Давайте посмотрим следующий пример, чтобы понять, как работает это свойство:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stretch and Scale Background-image with CSS</title>
<style>
.box{
width: 300px;
height: 300px;
background: url("images/avatar.svg") no-repeat;
background-size: cover;
border: 6px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Если оно работает не так, как нужно для вас, вы можете попробовать другие значения: background-size: contain;, background-size: 100%;, background-size: 100vw 100vh; и т. д.
Подробнее см. Руководство по свойству background в CSS3 для подробной информации.
