CSS The object-fit Property

The content can be set to scale up or down, shrink or stretch to fit into the specified width and height with the help of the property values.

  • fill
  • contain
  • cover
  • none
  • scale-down

The CSS 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".

All Values of The CSS object-fit Property

The object-fit property can have the following values:

  • 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)

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -