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

<!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>

Here is an example with "cover" value which cuts off the sides of an image, preserves the aspect ratio, and also fills in the space:

Example

<!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>

An example with "contain" value:

Example

<!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>

Example with "scale-down" value which sets the image in a smaller size:

Example

<!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>

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.




Related articles