Как растянуть картинку во весь блок при skew?

Question

[MalGym]

Есть блок, ему задан skew(30deg) , в нем есть картинка, чтобы ее не косило, задал ей skew(-30deg) , но есть одно но, она не растягивается во весь блок... Сделать картинку псевдоэлементом не получится, это слайдер.
Вот что имею:

<div class="your-class">
    <div class="wrap-img">
    	<div class="skaw-img">
    	    <img src="img/brand1.jpg" alt="">
    	</div>
    </div>
    <div class="wrap-img">
    	<div class="skaw-img">
    	    <img src="img/brand2.jpg" alt="">
    	</div>
    </div>
    <div class="wrap-img">
    	<div class="skaw-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;
}

Comments

[VegasChickiChicki]

попробуйте поиграть с object-fit ,возможно подойдет fill.

[MalGym]

VegasChickiChicki, не растягивается полностью

[Ankhena]

MalGym, Смешно, но придется вспомнить теорему Пифагора и посчитать ширину с её помощью. Потому что ширина блока это ширина до трансформации, а значит картинка должна быть больше.

[MalGym]

Ankhena, не вариант , тогда она внутри там размазанная ...
Решил это с помощью clip-path

[Ankhena]

MalGym, размазанная она потому что размер картинки не правильный или качество. По правильному, использовать <picture>