<h1>Object Fit - <small>(300 x 300px for example only but could be any size or fluid)</small> </h1>
<div class="object-fit"> <img class="backgroundSwap" src="https://picsum.photos/1000/700" width="1000" height="700" alt="a1"> </div>
<div class="object-fit"> <img class="backgroundSwap" src="https://picsum.photos/500/1300" width="500" height="1300" alt="gate"> </div>
<h2>Original image sizes below so that you can see how they have been made to fit</h2>
<div><img src="https://picsum.photos/1000/700" width="1000" height="722" alt="a1"></div>
<div><img src="https://picsum.photos/500/1300" width="500" height="1300" alt="gate"></div>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
	margin: 0;
	background-color: #FFEEDD;
}
small {
  font-weight: normal;
  font-size: 1rem;
}

/* code below needed for object-fit routines*/
/* check for object-fit support */
detect {
  display: none;
}
@supports (object-fit: cover) {
  detect {
    display: block;
  }
}
.object-fit {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 1%;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}
.object-fit img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
@supports (object-fit: cover) {
  .object-fit img {
    position: static;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
  }
}
/* this class added by js */
img.modifiedImg {
  background-repeat: none;
  background-position: 50% 50%;
  background-size: cover;
  position: static;
  height: 100%;
  width: 100%;
  transform: none;
}
// only used for browsers that don't apply object-fit:cover.

// find all images with a certain class and remove the foreground image into a background image instead so that background-size:cover can be used.

(function(d) {
  "use strict";
  var notSupported = false;
  function detect() {
    var newEl = document.createElement("detect");
    document.body.appendChild(newEl);
    if (getComputedStyle(newEl).getPropertyValue("display") === "none") {
      notSupported = true;
    }
    //newEl.remove(); not supported in IE11
    // Create Element.remove() function if not exist
    if (!("remove" in Element.prototype)) {
      Element.prototype.remove = function() {
        if (this.parentNode) {
          this.parentNode.removeChild(this);
        }
      };
    }
    // Call remove() 
    newEl.remove();
  }
  detect();

  if (notSupported) {
    if ("querySelector" in document && "addEventListener" in window) {
      var theImages = d.querySelectorAll(".backgroundSwap");
      for (var i = 0, len = theImages.length; i < len; i++) {
        var imageUrl = theImages[i].src;
        theImages[i].src =
          "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
        theImages[i].classList.add("modifiedImg");
        theImages[i].style.backgroundImage = "url(" + imageUrl + ")";
      }
    }
  }
})(document);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.