The content can be set to scale up or down, shrink or stretch to fit into the specified width and height with the help of the property values.
The CSS object-fit property is used to specify how an <img> or <video> should
be resized to fit its container.
This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
The object-fit property can have the
following values:
fill - This is default. The replaced
content is sized to fill the element's content box. If necessary, the object
will be stretched or squished to fitcontain - The replaced content is scaled
to maintain its aspect ratio while fitting within the element's content boxcover - The replaced content is sized to maintain its aspect ratio while
filling the element's entire content box. The object will be clipped to fitnone - The replaced content is not resizedscale-down - The content is sized as if none or contain were specified
(would result in a smaller concrete object size)Supported Browsers: The browser supported by property are listed below: