CSS object-fit Property

The object-fit property is used to specify how an element should be resized to fit its content box.

The object-fit property allows to fit the contents of an image into the dimensions specified in the style sheet.

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. There are five values:

fill
contain
cover
none
scale-down

Initial Value	fill
Applies to	Replaced elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.objectFit = "cover";

Syntax

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

Example of the object-fit property with the "fill" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: fill;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Fill value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Try it Yourself »

Result

Here, the image with the applied value is stretched to fit the box. In the next example, the "cover" value cuts off the sides of an image, preserves the aspect ratio, and also fills in space.

Example of the object-fit property with the "cover" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Cover value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Try it Yourself »

In the following example, the image with the applied value has the aspect ratio of the original image.

Example of the object-fit property with the "contain" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Contain value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Try it Yourself »

In our last example, the applied value sets the image in a smaller size as if "contain" or "none" were specified.

Example of the object-fit property with the "scale-down" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img.tree {
        width: 200px;
        height: 400px;
        object-fit: scale-down;
      }
    </style>
  </head>
  <body>
    <h2>Object-fit property example</h2>
    <h3>Original image:</h3>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
    <h3>Scale-down value:</h3>
    <img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
  </body>
</html>

Try it Yourself »

Values

Value	Description
fill	The content is resized as much to fill the content box. This is the default value of this property.
contain	The aspect ratio of content is scaled up as much as possible while remaining contained within the boundaries of the element.
cover	The aspect ratio of the content is sized while filling the element's content box. It will be clipped to fit the content box.
none	No resized content.
scale-down	The same as none or contain values. The content of the element will be in a smaller size.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.