Aquileo | HTML | DOM Style objectPosition Property

The DOM Style objectPosition property is used to set or return how an image or video would be positioned in their own content box.

Syntax:

It returns the objectPosition property.

object.style.objectPosition

It is used to set the objectPosition property.

object.style.objectPosition = "position|initial|inherit"

Property Values:

position: This is used to specify the position of the image or video in terms of either length values or strings (left, right and center).

Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
      The objectPosition property 
      specify how an image or video 
      should be positioned in its content box.
    </p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png" 
         height="800" 
         width="800" 
         class="content" />
  
    <button onclick="setObjectPosition()">
        Change resize
    </button>

    <!-- Script to set objectPosition to 50% 100% -->
    <script>
        function setObjectPosition() {
            elem = document.querySelector('.content');
            elem.style.objectPosition = '75% 100%';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:

position-before

After clicking the button:

position-after

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

Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
            object-position: 50% 100%;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
        The objectPosition property specify 
      how an image or video should be
      positioned in its content box.
    </p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png"
         height="800"
         width="800"
         class="content" />

    <button onclick="setObjectPosition()">
        Change resize
    </button>

    <!-- Script to set objectPosition to initial -->
    <script>
        function setObjectPosition() {
            elem = document.querySelector('.content');
            elem.style.objectPosition = '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-3:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Style objectPosition Property
    </title>
    <style>
        #parent {
            object-position: 50% 100%;
        }
        
        .content {
            border: 1px solid;
            object-fit: cover;
            height: 250px;
            width: 500px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style objectPosition Property
    </b>
    <p>
        The objectPosition property specify how an 
      image or video should be positioned in its content box.
    </p>
    <div id="parent">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190311222622/sample-image.png" 
             height="800"
             width="800" 
             class="content" />
    </div>

    <button onclick="setObjectPosition()">
        Change resize
    </button>

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

</html>

Output:

Before clicking the button:

inherit-before

After clicking the button:

inherit-after

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

Google Chrome 32.0 and above
Edge 79 and above
Firefox 36.0 and above
Opera 19.0 and above
Apple Safari 10 and above
Internet Explorer not supported

HTML | DOM Style objectPosition Property

Explore