旋转背景图片高度100％

Question

我试图使图像以一定的旋转角度（10度）响应，但是我的身高增加太多，并且不在中心和整个宽度上。

这是设计（颜色是背景图片），如您所见，随着旋转的进行，我无法将所有顶部都填满，底部也不能填满，另一个问题是我的全高增加了。

* 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%;
  }

非常感谢你们。

Answer 1

在伪元素中使用图像，并允许一些溢出来覆盖空白：

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>