scss-library/components/01_Layouts/contentCrop/_contentCrop.scss

@mixin RV-ContentCrop--bottom {
    img {
        object-position: bottom;
    }
}

@mixin RV-ContentCrop--top {
    img {
        object-position: top;
    }
}

@mixin RV-ContentCrop--right {
    img {
        object-position: right;
    }
}

@mixin RV-ContentCrop--left {
    img {
        object-position: left;
    }
}

@mixin RV-ContentCrop--center {
    img {
        object-position: center;
    }
}

@mixin RV-ContentCrop__Text {
    &--fade {
        &:after {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
            display: block;
            content: ' ';
            opacity: 0.8;
            position: relative;
            top: -25%;
            width: 100%;
            height: 25%;
            z-index: -10;
        }
    }

    &--ellipsis {
        &:after {
            position: relative;
            display: block;
            bottom: 1.2em;
            left: calc(100% - 3ch);
            content: '...';
            font-size: 1.2em;
            min-width: 2em;
            background-color: $-background-color;
            padding: 0 2px;
        }
    }
}

@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {

    // Heuristic, just to be safe
    $-line-height: $-line-height * 1.1;
    $-background-color: white;
    display: block;
    overflow: hidden;

    p {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        padding: 0;
        margin: 0;
        line-height: #{$-line-height};
        // Determining the max line count and caclulating the height
        z-index: -20;
        position: relative;
        background-color: #{$-background-color};
        height: floor(100% / $-line-height / 16) * $-line-height * 16;
    }

    &--square,
    &--1to1 {
        width: 100%;
        padding-top: 100%;
        position: relative;

        img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }

    &--1to2 {
        width: 50%;
        padding-top: 100%;
        position: relative;

        img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }

    &--2to1 {
        width: 100%;
        padding-top: 50%;
        position: relative;

        img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #{$-prefix}--left {
        @include RV-ContentCrop--left;
    }

    #{$-prefix}--center {
        @include RV-ContentCrop--center;
    }

    #{$-prefix}--top {
        @include RV-ContentCrop--top;
    }

    #{$-prefix}--bottom {
        @include RV-ContentCrop--bottom;
    }

    #{$-prefix}--center {
        @include RV-ContentCrop--center;
    }
}

.RV-ContentCrop {
    @include RV-ContentCrop;
}