This page illustrates different object-fit settings. It is part of the Exploring object-fit Mozilla Hacks post.
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.