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%;