Dieses Mixin verwende ich um Bilder so zu skalieren dass sie ihren Wrapper, also das umliegende Element, füllen. Außerdem übernimmt es die Darstellung des Wrappers, diesem wird ein Seitenverhältnis zugewiesen, welches von relativen Werten ausgeht.

Das Mixin wird auf das Wrapper Element angewendet. Dabei gibt man lediglich das Seitenverhältnis an in welchem das Bild dargestellt werden soll.
Da SCSS im Gegensatz zu CSS Rechenaufgaben beherrscht, kann hier also auch 16/9 eingegeben werden um einen 16:9 Rahmen darzustellen.

@mixin image-cover($heightaspect) {
  /* image cover */
  position: relative;
  display: inline-block;
  overflow: hidden;
img {
  position: absolute;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
}
&:after {
    content: "";
    display: block;
    padding-bottom: 100% / $heightaspect;
  }
}

Leider funktioniert object-fit: cover nicht in allen Browsern, deshalb gehe ich noch einmal mit dem Modernizr drüber:

function modernizeObjectFit( $selector ) {
// Object-fit
    if ( ! Modernizr.objectfit ) {
        jQuery( $selector ).each( function() {
            var $container = jQuery( this ),
                imgUrl = $container.find( 'img' ).prop( 'src' );
            if ( imgUrl ) {
                $container
                    .css( 'backgroundImage', 'url(' + imgUrl + ')' )
                    .addClass( 'compat-object-fit' );
            }
        } );
        jQuery( $selector + " img" ).each( function() {
            jQuery( this ).css( 'opacity', '0' );
        } );
    }
}