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.
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".
object-fit property can have the
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 fit
contain- The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
cover- The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit
none- The replaced content is not resized
scale-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: