CSS object fit Property
CSS object-fit Property
The object-fit property is used to specify how an img element or video element be resized to fit its container. It tells the content to fill the container in a variety of ways like preserve that aspect ratio or stretch up and take up as much space as possible etc.
Syntax:-
Its syntax is:- object-fit: fill | contain | cover | scale-down | none | initial | inherit;
Further Explanation:-
Value | Description |
---|---|
fill | The replaced content is sized to fill the element's content box. |
contain | The replaced content is scaled to maintain its aspect ratio while fitting within the element content-box |
cover | The replaced content is sized to maintain its aspect ratio while filling the element entire content box. It can be clipped to fit |
none | The replaced content is not resized |
scale-down | The content is sized as if none or contain were specified. |
initial | Sets this property to its default value. |
inherit | Inherits this property from its parent element. |