HTML | DOM Style objectFit Property

Last Updated : 08 Aug, 2022

The Style objectFit property in HTML DOM is used to set or return how an image or video element is resized to fit it's container.

Syntax:

It returns the objectFit property.

object.style.objectFit

It is used to set the objectFit property.

object.style.objectFit = "contain|cover|scale-down|none|fill|
initial|inherit"

Return Values: It returns a string value, which represents the object-fit of an element

Property Values:

1. contain: The replaced content is scaled to maintain its aspect ratio while also fitting the content box.

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png" 
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to contain -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'contain';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

contain-before

After clicking the button:

contain-after

2. cover: The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object may be clipped to fit the content box if required.

Example 2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png"
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to cover -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'cover';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

cover-before

After clicking the button:

cover-after

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

Example 3:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png"
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to scale-down -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'scale-down';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

scale-down-before

After clicking the button:

scale-down-after

4. none: The replaced content is not resized.

Example 4:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png" 
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to none -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'none';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

none-before

After clicking the button:

none-after

5. fill: The content is resized to fill the element's content box. This is the default value.

Example 5:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
            object-fit: scale-down;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png" 
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to fill -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'fill';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

fill-before

After clicking the button:

fill-after

6. initial: This is used to set this property to its default value.

Example 6:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #content {
            border: solid;
            height: 250px;
            width: 400px;
            object-fit: scale-down;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png" 
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to initial -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'initial';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

initial-before

After clicking the button:

initial-after

7. inherit: This inherits the property from its parent.

Example 7:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style objectFit Property
    </title>
    <style>
        #parent {
            object-fit: contain;
        }
        
        #content {
            border: solid;
            height: 250px;
            width: 400px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectFit Property
    </b>
    <p id="parent">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png"
             id="content" />
    </p>
    <button onclick="setObjectFit()">
        Change objectFit
    </button>

    <!-- Script to set objectFit to inherit -->
    <script>
        function setObjectFit() {
            elem = document.querySelector('#content');
            elem.style.objectFit = 'inherit';
        }
    </script>
</body>

</html>