1

Задача - вставить несколько (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 раза, иначе у нее остаются черные поля - в начале деформируется рамка, потом картина обрезается, а потом выравнивается: фото без увеличения

Как обрезать изображения по нужной форме и при этом не увеличивать их? Спасибо

2
  • 1
    cssportal.com/css-clip-path-generator вот здесь легко нарисовать любую фигуру в CSS
    – Meth0d
    20 ноя в 17:56
  • Да, отличный совет, большое спасибо! Оформите ответом - закрою вопрос
    – GrimCap
    23 ноя в 20:50

1 ответ 1

2

Вот здесь легко нарисовать любую фигуру в CSS!

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.