Как разместить анимированное svg в background?

Здравствуйте.
Есть такая структура блока в лендинге. На фоне этого блока должен располагаться svg, на который прикручено порядочно анимации, те в background-image его вынести не получится.
<div class="wrapper">
  <div class="background">
    <svg viewBox="0 0 1426 793">...</svg>
  </div>
  <div class="content">...</div>
</div>

.wrapper {
  position: relative;
}
.background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

Выглядит это так
62f5977f78f73552068983.png

Проблема заключается в том, что svg растягивается на всю ширину, на десктопах часть его вылезает вниз, за блок .wrapper, чего не видно, и вроде бы все отлично.
62f59816dbf2a020315906.png

Но на меньших значениях ширины экрана (на мобилках в частности) высоты svg не хватает и остается пустое пространство

62f5990009ce7885326284.png

Разрабатываем студентами небольшой лендинг, и я если честно слабо понимаю что с этим можно сделать. Это проблема дизайнера, фронтендера или кого? Имеет ли смысл копировать svg на пустующее пространство, от чего просядет производительность, или можно решить эту проблему средствами css?

Спасибо за помощь.

P.S. Ссылка на гитхаб. Проблема в homepage
Github pages
  • Вопрос задан
  • 92 просмотра
Решения вопроса 2
@ForSureN1
frontend dev
width: 100%;
height: 100%;
for svg
Ответ написан
@cssfish
Плохое знание основ - причина больших бед
дело в соотношении сторон (ratio).
svg, как видно невооруженным взглядом, имеет rato 1426 : 793
У вас он вставлен в блок некой высотой (как я предполагаю, т.к. примера или кода не привели полного), и получается что: ширина плавает, высота фиксированная. Т.е. ratio плавает, и часть svg то подрезается, то наоборот "остается пустое пространство".
Чтобы это решить, svg надо затолкать в блок с фиксированным ratio. Делается он просто:
.background {
  position: relative;
}
.background:before {
  content:"";
  display: block;
  height: 0; // Опционально
  padding-top: calc( 100% * 793 / 1426 );  // Y / X   
}


и растягиваем svg внутри него

.background svg {
  display: block;
  position : absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; //  опционально
  height: 100%; // опционально
}


но это в случае если background блок самостоятельный. а у вас я гляжу он тоже куда-то растягивается, тогда ratio надо не на него вешать а на обертку, либо структуру как-то менять
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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