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"> w3wiki </ 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.w3wiki.net/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:
- 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"> w3wiki </ 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.w3wiki.net/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:
- 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"> w3wiki </ 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.w3wiki.net/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:
- 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
Contact Us