Rotate background image height 100% - html

Question

I'm trying to make my images responsive with some rotation angle (10deg) but my height is increasing too much, and it's not at center and full width.
This is the design (colors are background-image), as you can see, with the rotation, I can't fill all the top side and same with bottom, and another problem, is my full height increase.
*CSS: CODE
.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%;
}
Thank you so much guys.

Answer 1

Use the images within a pseudo element and allow some overflow to cover the white space:
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>