CSS object-fit Property
Cut off the sides of an image, preserving the aspect ratio, and fill in the space:
Try it Yourself »
Definition and Usage
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".
|see individual properties
|no. Read about animatable
|object.style.objectFit="cover" Try it
The numbers in the table specify the first browser version that fully supports the property.
|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
|The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
|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
|The replaced content is not resized
|The content is sized as if none or contain were specified (would result in a smaller concrete object size)
|Sets this property to its default value. Read about initial
|Inherits this property from its parent element. Read about inherit
CSS tutorial: CSS object-fit
CSS reference: CSS object-position
HTML DOM reference: The objectFit property