Skip to content
Related Articles

Related Articles

HTML | DOM Style objectFit Property
  • Difficulty Level : Basic
  • Last Updated : 01 Aug, 2019

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"

Property Values:

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

    Example-1:




    <!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

  • 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:




    <!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

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

    Example-3:




    <!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

  • none: The replaced content is not resized.

    Example-4:




    <!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

  • fill: The content is resized to fill the element’s content box. This is the default value.

    Example-5:




    <!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

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

    Example-6:




    <!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

  • inherit: This inherits the property from its parent.

    Example-7:




    <!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 31.0
  • Internet Explorer 16.0
  • Firefox 36.0
  • Opera 19.0
  • Apple Safari 7.1
My Personal Notes arrow_drop_up
Recommended Articles
Page :