Kinderman
@Kinderman
Front-end Developer

SVG background — как правильно сделать адаптивным?

На лендинг пейдж есть несколько секций с бэкграундом, прописанным вот таким образом:
.about-me {
    background-image: url(/img/back_2_section.svg);
    background-position: top;
    padding-top: 184px;
    padding-bottom: 145px;
}


Но когда начал делать адаптив фон ведет себя не адаптивно.
При большом разрешении:
60b16060157ff269583944.jpeg

Когда уменьшаю:

60b16125b128d915351957.jpeg

Может я не так прописываю сам фон?
Поделитесь, пожалуйста, правильным решением.
  • Вопрос задан
  • 671 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Фоновые изображения адаптируются с помощью background-size
Или изменения размеров блока. Например, вставляются как фон псевдоэлемента и дальше регулируют размер псевдо, а фону задают contain, cover или 100% (или не 100)

Единственно отличие между растром и SVG в том, что растр меняет свои пропорции, а SVG обычно нет.
Чтобы менялись пропорции SVG у него должен быть атрибут preserveAspectRatio

Вот примеры
https://jsfiddle.net/0xrh6uvj/ - меняйте ширину окна с результатом

----
Но вы не сделали песочницу на jsfiddle.net с вашим проблемным кодом и не ясно, что вообще вы там творите.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
kryamk
@kryamk
А мне кажется дело не в фоне, а в том что блок с фоном сжимается. Поудаляйте все блоки (прямо в диспетчере задач), кроме того что с фоном и посмотрите почему он сжимается. Можно также задать border или outline для блока с фоном чтобы его границы видеть
Ответ написан
Комментировать
@alekcena
Нелинейный наставник
Levchenski
@Levchenski
js разработчик
background-repeat: no-repeat;
background-size: cover;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы