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