Open In App

CSS object-fit Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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


Last Updated : 19 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads