Задача - вставить несколько (4-5) картинок с маской в виде трапеции
(первое и последнее изображения обрезаются немного иначе, чем средние 2-3)
Делаем:
HTML
<div class="imgs">
<div class="img"><img src="/img/1.jpg" alt=""></div>
<div class="img">....
</div>
LESS
.imgs {
display: flex;
width: calc(100% + 100px);
height: 20vw;
min-height: 110px;
max-height: 300px;
margin-left: -50px;
.img {
position: relative;
height: 100%;
opacity: .7;
overflow: hidden;
cursor: pointer;
transform: skew(25deg);
img {
transform: skew(-25deg) scale(1.5);
height: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
&:hover {
z-index: 1;
opacity: 1;
box-shadow: 0 0 20px 0 #000;
}
&:first-child {margin-left: -6%}
&:last-child {margin-right: -6%}
}
}
Получается в целом нормально но печалит необходимость увеличивать картинку в 1.5 раза, иначе у нее остаются черные поля - в начале деформируется рамка, потом картина обрезается, а потом выравнивается:
Как обрезать изображения по нужной форме и при этом не увеличивать их? Спасибо