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 how the content should fill the container in various ways; for example, "keep 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, maintain 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 into 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 cropped.
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 attribute to its default value. See initial.
inherit Inherits this attribute from its parent element. See inherit.

Technical details

Default value: fill
Return value: A string representing the 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