Overview

Property Description Values
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width. fill (initial) | contain | cover | scale-down | none |
object-position Determines the alignment of the replaced element inside its box. < position >
Examples - 50% 50% (initial) | 50px | 50% 20% |

Detail

object-fit

object-fit: fill;

The replaced content is sized to fill the element's content box.

object-fit: contain;

The replaced content is sized to maintain its aspect ratio while fitting within the element's content box.

object-fit: cover;

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box:

object-fit: scale-down;

Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size.

object-fit: none;

The replaced content is not resized to fit inside the element's content box

object-position

object-position: 50% 50%;

object-position: 50px;

object-position: 50% 20%;