CSS - object-fit Property

Quiz

CSS object-fit property is used to specify how an image or video should be resized or cropped to fit within its container.

Syntax

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

Property Values

Value	Description
fill	Image or video fills the container completely, possibly distorting its aspect ratio. Default value.
contain	Image or video is scaled to fit within the container while maintaining its aspect ratio. It may leave empty space within the container.
cover	Image or video is scaled to cover the entire container while maintaining its aspect ratio. This might result in some parts of the image/video being clipped.
scale-down	Image or video is scaled down to fit within the container if it was larger than its original size, otherwise, it's displayed at its original size.
none	Image or video is displayed at its original size, regardless of the container size. It may overflow the container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Object Fit Property

The following examples explain the object-fit property with different values.

Object Fit Property with Fill Value

To allow the element to fill the container completely such that the aspect ratio of the element may be distorted, we use the fill value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: fill;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: fill
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

Object Fit Property with Contain Value

To allow the element to be scaled to fit the container along with maintaining its aspect ratio, we use the contain value. There may be spaces left within the container. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: contain;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: contain
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

Object Fit Property with Cover Value

To allow the element to be scaled to fit the container along with maintaining its aspect ratio, we use the cover value. This could result in some portions of the elemnent being chopped. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: cover;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: cover
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

Object Fit Property with Scale Down Value

To allow the element to scale down to fit within the container, we use the scale-down value. If the element's size is greater than the container, it will be sized as none or content whichever is smaller. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: scale-down;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: scale-down
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

Object Fit Property with None Value

To allow the element to retain its original size, we use the none value. If the size of the element is greater than the container, overflow occurs and if the size is smaller than the container, gaps will be there. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      img {
         border: 5px solid black;
         height: 250px;
         width: 350px;
         object-fit: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS object-fit property
   </h2>
   <h4>
      object-fit: none
   </h4>
   <img src="/css/images/content.png" 
   alt="img" width=1024 height=1024 />
</body>

</html>

Supported Browsers

Property
object-fit	32.0	79.0	36.0	10.0	19.0

css_reference.htm

Print Page