CSS object-fit property

CSS object-fit The property is used to specify how to adjust the size of <img> or <video> to fit its container.

Browser Support

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

Property Chrome IE Firefox Safari Opera
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit property

CSS object-fit The property is used to specify how to adjust the size of <img> or <video> to fit its container.

This property tells the content to fill the container in different ways. For example, 'preserve aspect ratio' or 'expand and occupy as much space as possible'.

Please see the tulip picture from Shanghai Flower Port below, which is 300x300 pixels:

Tulip

However, if we set the above image to 200x300 pixels, it will look like this:

Tulip

Example

img {
  width: 200px;
  height: 300px;
}

Try It Yourself

We see that the image is compressed to fit a 200x300 pixel container, and the original aspect ratio is destroyed.

If we use object-fit: cover;It will cut the sides of the image, maintain the aspect ratio, and fill the space as shown below:

Coffee

Example

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Try It Yourself

Another example

Here, we have two images, and we want them to fill 50% of the browser window's width and 100% of its height.

In the following example, we do not use object-fit, so that when we adjust the size of the browser window, the aspect ratio of the image will be destroyed:

Example

Try It Yourself

In the next example, we use object-fit: cover;, so that when we adjust the size of the browser window, the aspect ratio of the image is preserved:

Example

Try It Yourself

All values of the CSS object-fit property

object-fit The property can accept the following values:

  • fill - Default value. Adjust the size of the replaced content to fill the element's content box. If necessary, stretch or compress the object to fit the object.
  • contain - Scale the replaced content to maintain its aspect ratio while placing it within the element's content box.
  • cover - Adjust the size of the replacement content to maintain its aspect ratio while filling the entire content box of the element. The object will be cropped to fit.
  • none - Do not adjust the size of the replacement content.
  • scale-down - Adjust the content size as if no content or contained content has been specified (which will result in a smaller specific object size)

The following examples demonstrate object-fit All possible values of the property:

Example

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

Try It Yourself