Skip to main content

CSS object-fit Property

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

Syntax​

object-fit: fill | contain | cover | none | scale-down | initial | inherit;

where:

  • fill: It is the default value. Using this value, the entire object fills in the container. The replaced content is sized to fill the content box. If the aspect ratio of the object doesn't match the aspect ratio of the box, the object will be squished or stretched to fit in the box. The image will fill the area; even its aspect ratio is not matched.

  • contain: It resizes the content of an element to stay contained inside the container. It fits the image in the width and height of the box while maintaining the aspect ratio of the image. The replaced content is scaled for maintaining the aspect ratio while fitting within the content box of the element.

  • cover: It resizes the content of an element to cover its container. It fills the entire box with the image. If the aspect ratio of the object is not matched with the aspect ratio of the box, it clips the object to fit.

  • none: It does not resize the replaced content. The image retains its original size and ignores the height and width of the parent.

  • scale-down: It sized the content as none or as contain. It results in the smallest object size. It finds the smallest concrete object size by comparing the none and contain.

  • initial: It sets the property to its default value, i.e., the image is stretched to fit in the container because the default value is fill.

  • inherit: It inherits the value from its parent element.

Table of Contents