**`object-fit`** is  a CSS property that sets how certain elements' content is resized to fit their container.

The elements that are affected by the <code>object-fit</code> property are called replaced elements.

In CSS, **replaced elements** are external objects whose representation is not in the CSS formatting model. Their representation is outside the scope of CSS.

The replaced elements in CSS are: `code>img`, `video`, `iframe`, and `embed` tags.

#     
## Syntax and values

The syntax of the `object-fit` is as follows:

     property: value

It has its local values and global values. 

The local values are: 

      object-fit: fill;
      object-fit: contain;
      object-fit: cover;
      object-fit: none;
      object-fit: scale-down;

* **`fill`**: The replaced element content is resized to fit in its container even if it requires being stretched or squished to fit. This is the default value.

* **`contain`**: The content is resized to fit its container but it keeps its aspect ratio no matter what.

* **`cover`**: The content fills its content by clipping just to fit, but it also keeps its aspect ratio.

* **`none`**: Here, the content is not resized.

* **`scale-down`**: The image is scaled down to the smallest version of <code>none</code> or <code>contain</code>.

The global values are:

      object-fit: inherit;
      object-fit: initial;
      object-fit: revert;
      object-fit: unset;

The work of the global values doesn't change for all CSS properties.

<html>
 <head>
 </head>
 <body>
   <h1>Demonstration</h1>
   <section>
     <h2> <code>object-fit: contain</code></h2>
     <img class="fill" src="https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?k=20&m=1297349747&s=612x612&w=0&h=ki4CX5eS8qtXUzQyYZJxZXG0pNyRIlE0FHYFtaJ0p0I=" alt="lantern">
   </section>
   
 </body>
</html>

img{
    width: 200px;
    height: 150px;
    border: 1px solid black;
    margin: 15px 0;
}
.fill{
    object-fit: contain;
}
h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
    color: brown;
    text-align: center;
    font-size: 30px;
}
h2{
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1em;
    color: rgb(130,75,0);
}
p{
    line-height: 2em;
    color:black;
    font-weight: 150;
}


codemirror

#     
## Explanation


* Lines 6–9 are the presentation of one of the replaced elements.

* Line 8 contains the `img` tag, which has an image and a `class: "fill"`.

* Lines 1–6 (in the "CSS" tab) contain the property of the <code>img</code>. Here, it is given a specified width and height and other values.

* Lines 7–9 (in the "CSS" tab) set the  object fit property to <code>contain</code>. This makes the content  fit in the container while keeping its aspect ratio.

> Note: All other values are used the same way, depending on your desired output. 



What is the object-fit property in CSS?

CSS's object-fit property resizes replaced elements to fit containers, with values like fill, contain, cover, none, and scale-down.