How to stretch picture in the entire unit when skew?

There is a block, it is set skew(30deg) , it has a picture below it is not mowed, asked her skew(-30deg) , but there is one but it does not stretch the entire block... to Make the picture a pseudo-element does not work, this slider.
Here is what I have:
5cfc173e7fe02818373756.png
<div class="your-class">
 <div class="wrap-img">
 <div class="as-img">
 <img src="img/brand1.jpg" alt="">
</div>
</div>
 <div class="wrap-img">
 <div class="as-img">
 <img src="img/brand2.jpg" alt="">
</div>
</div>
 <div class="wrap-img">
 <div class="as-img">
 <img src="img/brand3.jpg" alt="">
</div>
</div>
 </div>

.wrap-img {
 width: 100%;
 height: 100%;
}
.skaw-img img {
 width: 100%;
 height: 100%;
 transform: skewX(30deg);
 transition: all .5s;
 object-fit: cover;
}
.skaw-img {
 width: 25%;
 height: 100%;
 margin: 0 auto;
 transform: skewX(-30deg);
 transition: all .5s;
 cursor: pointer;
 overflow: hidden;
}
March 23rd 20 at 19:41
0 answer

Find more questions by tags CSS