object-fit property CSS Reference



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.


Relative articles