Поверните высоту фонового изображения на 100% - PullRequest
Новая
       12

Поверните высоту фонового изображения на 100%

0 голосов
/ 06 ноября 2018

Я пытаюсь сделать мои изображения отзывчивыми с некоторым углом поворота (10 градусов), но мой рост слишком сильно увеличивается, и он не в центре и не на всю ширину.

Это дизайн (цвета - это фоновое изображение), как вы можете видеть, с вращением я не могу заполнить всю верхнюю сторону и то же самое с нижней, и другая проблема, моя полное увеличение высоты.

Structure

* CSS: КОД 

.rotate > div {
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
.rotate > div > div > div {
   transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .list {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .item {
    height: 50%;
  }
  .wrapper {
    width: 100%;
    height: 100%;
  }

Большое спасибо, ребята.

1 Ответ

0 голосов
/ 07 ноября 2018

Используйте изображения в псевдоэлементе и допускайте некоторое переполнение, чтобы закрыть пробел: 

body {
 margin:0;
 min-height:500px;
 height:100vh;
 overflow:hidden;
}
.box {
  height:50%;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:-40%;
  left:-10%;
  right:-10%;
  bottom:-40%;
  transform:rotate(-10deg);
  background:var(--i) center/cover no-repeat;
}
.box.first::before {
  bottom:0;
}
.box.last::before {
  top:0;
}
<div class="box first" style="--i:url(https://picsum.photos/1000/800?image=0)">

</div>
<div class="box last" style="--i:url(https://picsum.photos/1000/800?image=1069)">

</div>
...