Styles for Object-Fit: Cover Styling of Responsive Images

image-cover.scss

/**
 * If this mixin is applied to an <img> tag that is a child of a parent element
 * with a fixed height or changing aspect ratio, it will scale the image to cover
 * the smallest dimension, and crop the image through the overflow: hidden
 * rule on the parent.
 * You must apply the mixin image-cover-parent to the parent in order for
 * image-cover to work on the child.
 */
@mixin image-cover() {
  display: block;
  position: absolute;
  // Puts top left corner of image in center of container
  top: 50%;
  left: 50%;
  // Ensures image keeps its intrinsic aspect ratio
  width: auto;
  min-width: 100%;
  height: auto;
  // Min-width and min-height scale the image up to completely fill its container if one of its
  // dimensions is shorter than the container
  min-height: 100%;
  // Centers the image, because percentages here are relative to the intrinsic
  // size of the image itself, not the container
  transform: translate(-50%, -50%);
}

@mixin image-cover-parent() {
  display: block;
  position: relative;
  overflow: hidden;
}

imagescaledown.js

(function(Site, $, undefined) {
  'use strict';

  Site.imageScaleDown = function() {

    function scaleDownAllImages() {

      $('.image-wrapper').each( function(index, element) {

        var $child_image = $(element).find('.image-wrapper__image-cover');
        var image_width = $child_image[0].naturalWidth;
        var image_height = $child_image[0].naturalHeight;
        var image_aspect_ratio = image_width / image_height;

        var container_width = element.clientWidth;
        var container_height = element.offsetHeight;
        var container_aspect_ratio = container_width / container_height;

        // Check to see if both image dimensions are larger than the current_container
        // The CSS will scale the image up if one of the image's dimensions is smaller
        // than the container
        if ( (image_width > container_width) && (image_height > container_height) ) {
          // Scale down the smaller dimension of the image
          if ( image_aspect_ratio <= container_aspect_ratio ) {
            $child_image.css( {height: "", width: "101%"} );
          }
          else {
            $child_image.css( {height: "101%", width: ""});
          }
        }
        // Reset their inline CSS if not
        else {
          $child_image.css( {height: "", width: ""} );
        }

      });

    }

    $(window).debounce('resize', scaleDownAllImages, 100);
    scaleDownAllImages();

  };

}(window.Site = window.Site || {}, jQuery));

The SCSS scales and centers an image if one of the image's dimensions is smaller than the container...the javascript is required to scale down the image if both the image's dimensions are bigger than the container.