Style objectFit Property

❮ Previous ❮ Style Object Reference Next ❯

Example

Cut off the sides of an image, preserving the aspect ratio, and fill in the space:

document.getElementById("myImg").style.objectFit = "cover";

Description

The objectFit 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"

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
objectFit	31.0	16.0	36.0	7.1	19.0

Syntax

Return the objectFit property:

object.style.objectFit

Set the objectFit property:

Property Values

Value	Description
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)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	fill
Return Value:	A String, representing the object-fit of an element
CSS Version	CSS3

CSS tutorial: CSS object-fit

CSS reference: object-fit property