Contents
Definition and Usage
The ‘object-fit’ property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
| Name: | object-fit |
|---|---|
| Value: | fill | contain | cover | none | scale-down |
| Initial: | fill |
| Applies to: | replaced elements |
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value |
Syntax
object-fit : fill | contain | cover | none | scale-down
Values
- ‘
fill‘ - The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
- ‘
contain‘ - The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.
- ‘
cover‘ - The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.
- ‘
none‘ - The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
- ‘
scale-down‘ - Size the content as if ‘
none‘ or ‘contain‘ were specified, whichever would result in a smaller concrete object size.Note that both ‘
none‘ and ‘contain‘ respect the content’s intrinsic aspect ratio, so the concept of “smaller” is well-defined.
