This page illustrates different object-fit settings. It is part of the Exploring object-fit Mozilla Hacks post. For the following examples to work, you'll need to be using a fairly new browser — Firefox 36+, Chrome 31+, Opera 26+ or Safari 8+. The latter supports object-fit, but not object-position.
with object-fit: contain, the image is letterboxed inside the image element, retaining its aspect ratio.
with object-fit: cover, the image completely covers the image element — it is shown completely along the shortest dimension, and will be cut off in the other direction.
Object-fill: fill can override a video’s intrinsic aspect ratio, forcing it to completely fill the <video> element. This is good for correcting videos with broken aspect ratios.
Combining object-fit and object-position with CSS transitions can lead to some pretty interesting effects for image or video galleries.
The three images below have object-fit: cover, and three different object-position values set on them: 0 0, bottom, and 100px 100px respectively.