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=
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:
- After clicking the button:
- 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=
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:
- After clicking the button:
- 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=
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:
- After clicking the button:
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