Other plugins, most notably Simon Schmid's jquery.object-fit and Anselm Hannemann's vanilla javascript polyfill, provide more complete support for object-fit and implement other values such as fill, contain and scaled-down and work directly on any HTML object that should respond to object-fit rather than only on elements containing image tags.

Our approach may be less flexible, but is more efficient for situations where you need to fit images within an area within a different aspect ratio. As a jQuery plugin it can be combined with numerous other plugins for slide shows and other effects. Inline styles are added only to browsers that do not support object-fit via a simple test on initial page load.

The plugin will now only check for support once and adds two body classes object-fit-checked and, if support is detected, object-fit-supported. This works much better with multiple images or when loading content asynchronously.

<figure class="image-cover">
	<img src="/path-to-images-folder/image.jpg" width="800" height="600" />
</figure>

figure.image-cover {
  position: relative;
  width: 50%;
  height: 20vh; /* viewport height, not supported in IE8*/
  overflow: hidden; /* important */
}
figure.image-cover img {
position: relative; /must have a non-static position to work in browsers that do not support object-fit/
width: 100%; /* initial value overriden by object-fit and/or plugin /
height: 100%; / initial value overriden by object-fit and/or plugin /
object-fit: cover; / works in latest Webkit browsers + FF 36+ */
}

$('figure.image-fit').imageFitCover();