Style objectFit attribute

Definition and Usage

objectFit Attribute used to specify how to adjust the size of <img> or <video> to fit its container.

This attribute tells content to fill the container in various ways; for example, "maintain the aspect ratio" or "stretch and occupy as much space as possible".

See also:

CSS Tutorial:CSS object-fit

CSS Reference Manual:The object-fit attribute

Example

Cut off the sides of the image, retain the aspect ratio, and fill the space:

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

Try it yourself

Syntax

Return the objectFit attribute:

object.style.objectFit

Set the objectFit attribute:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Attribute value

Value Description
fill Default. Resizes the replacement content to fill the content box of the element. If necessary, the object will be stretched or compressed.
contain Scales the replaced content to maintain its aspect ratio while fitting the content box of the element.
cover Resizes the replaced content to maintain its aspect ratio while filling the entire content box of the filling element. The object will be clipped.
none The replacement content will not be resized.
scale-down The size of the content is the same as none or contain, depending on which of the two gets the smaller object size.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: fill
Return value: A string representing the element's The object-fit attribute.
CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0