Skip to content
Related Articles

Related Articles

HTML | DOM Style objectFit Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • 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=
             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=
             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=
             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=
             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=
             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=
             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=
             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>

Output:

  • Before clicking the button:

 inherit-before

  • After clicking the button:

 inherit-after

Supported Browsers: The browser supported by objectFit property are listed below:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!