- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<title>Резиновый фон с preserveAspectRatio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background no-viewbox"></div>
<div class="background has-viewbox"></div>
<div class="background has-viewbox-psa-none"></div>
</body>
</html>
CSS
.background {
height: 200px;
background-repeat: no-repeat;
background-position: 50% 0;
background-size: 100% 100%;
border: 2px solid gold;
}
.no-viewbox {
background-image: url("no-viewbox.svg");
}
.has-viewbox {
}
.has-viewbox-psa-none {
}
ЗадачиВыполнено
Блоку .no-viewbox задано фоновое изображение без вьюбокса, и оно не тянется.
- Блоку
.has-viewboxзадайте адрес фоновой картинкиhas-viewbox.svgи посмотрите как ведёт себя фон с вьюбоксом: изображение заполняет доступное пространство с сохранением своих пропорций. - Блоку
.has-viewbox-psa-noneзадайте адрес фоновой картинкиhas-viewbox-psa-none.svg. Обратите внимание, что теперь фоновое изображение тянется не сохраняя пропорции, фон абсолютно резиновый.