Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS object-fit Property

  • Difficulty Level : Expert
  • Last Updated : 19 Oct, 2021

The CSS object-fit property is used to specify how an image or video should be resized to fit its content box. This property specifies the various ways to fill the content inside the content box or container, such as preserving the aspect ratio or stretching up & lift up as much space as possible, etc. The alignment position of the replaced element’s content object within the element’s box can be changed through the object-position property.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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

Property values: All the properties are described well with the example below.

fill: It is a default value. The replaced image is stretched to fit the content box. The replaced image will completely fill the box heedless of its aspect ratio.



Syntax:

object-fit: fill;

Example: This example illustrates the use of the object-fit property whose value is set to fill.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 400px;
        object-fit: Fill;
    }
    </style>
</head>
 
<body>
    <img src=
          alt="GeeksforGeeks"
          width="667"
          height="184">
</body>
</html>

Output:

contain: The replaced image preserves the aspect ratio of the original image while fitting within the content box.

Syntax:

object-fit: contain;

Example: This example illustrates the use of the object-fit property whose value is set to contain.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 400px;
        object-fit: contain;
    }
    </style>
</head>
 
<body>
    <img src=
         alt="GeeksforGeeks"
         width="667"
         height="184">
</body>
</html>

Output:



cover: This value also preserves the aspect ratio of the original image is the replaced image while fitting in the content box. Sometimes it is clipped to fit when the aspect ratio of the original image doesn’t match with the aspect ratio of the content box.

Syntax: 

object-fit: cover;

Example: This example illustrates the use of the object-fit property whose value is set to cover.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 400px;
        object-fit: cover;
    }
    </style>
</head>
 
<body>
    <img src=
          alt="GeeksforGeeks"
          width="667"
         height="184">
</body>
</html>

Output: 

none: The replaced image will ignore the aspect ratio of the original image. Hence, it is not resized.

Syntax:

object-fit: none;

Example: This example illustrates the use of the object-fit property whose value is set to none.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 400px;
        object-fit: none;
    }
    </style>
</head>
 
<body>
  <img src=
       alt="GeeksforGeeks"
       width="667"
       height="184">
</body>
</html>

Output:



scale-down: The replaced image is resized as if none or contain were specified and results in the smallest object size.

Syntax:

object-fit: scale-down;

Example: This example illustrates the use of the object-fit property whose value is set to scale-down.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 200px;
        object-fit: scale-down;
    }
    </style>
</head>
 
<body>
    <img src=
         alt="GeeksforGeeks"
         width="667"
         height="184">
</body>
</html>

Output: 

initial: It is used to set the default value i.e. replaced image is stretched to fit the content box as the default value is filled.

Syntax:

object-fit: initial;

Example: This example illustrates the use of the object-fit property whose value is set to initial.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    img {
        width: 200px;
        height: 400px;
        object-fit: initial;
    }
    </style>
</head>
 
<body>
    <img src=
         alt="GeeksforGeeks"
         width="667"
         height="184">
</body>
</html>

Output:



inherit: Inherit receives the property from the parent element. When it is used with the root element then the initial property will be used.

Syntax:

object-fit: inherit;

Example: This example illustrates the use of the object-fit property whose value is set to inherit.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> CSS | The object-fit Property </title>
    <style>
    .object {
        object-fit: none;
    }
     
    img {
        width: 200px;
        height: 400px;
        object-fit: inherit;
    }
    </style>
</head>
 
<body>
    <div class="object">
        <img src=
             alt="GeeksforGeeks"
             width="667"
             height="184">
    </div>
    <!--Here img inherits property from parent i.e none from class object-->
 
</body>
</html>

Output: 

Supported Browsers: The browsers supported by object-fit Property are listed below:

  • Google Chrome 32.0
  • Firefox 36.0
  • Microsoft Edge 79.0
  • Opera 19.0
  • Safari 10.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!