Mixin for object-fit:cover images that fill the parent's size with fallback using absolute positioning.

img-object-fit.scss

@mixin img-object-fit(){
    
    position:relative;
    overflow:hidden;
    img {
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height:auto;
    }
    
    @at-root {
        @supports(object-fit: cover) {
            & img {
                object-fit:cover;
                position:static;
                transform: translate(0, 0);
                height: 100%;
                width:100%;
            }
        }
    }
}