A Demo of the Object Fit Property

The object-fit property alters the way images get resized as their containing box is resized. Note: these are images in the HTML, not background images called by CSS.

An image that’s larger than its box

1. original image (1920x1080px)

   

2. object-fit: fill

   

3. object-fit: contain

   

4. object-fit: cover

   

5. object-fit: none

   

6. object-fit: scale-down

   

An image that’s smaller than its box

1. original image (267x150px)

   

2. object-fit: fill

   

3. object-fit: contain

   

4. object-fit: cover

   

5. object-fit: none

   

6. object-fit: scale-down