CSS | object-position Property
The object-position property of CSS specifies how an image or video element is positioned with x/y coordinates inside its content box.
Syntax:
object-position: <position> | initial | inherit
Property values:
- position: This specifies the position of the element. It takes 2 numerical values corresponding to the distance from the left of the content-box and the distance from the top of the content-box respectively. It is also possible to use negative values.
Example #1:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* Setting the object-position to '10px' from the leftmost of the box and '30px' from the topmost of the box */ object-position: 10px 30px; } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: 10px 30px</p> <img id="object" src=</body></html> |
Output:
Example #2:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* Setting the object-position to '50%' from the leftmost of the box and '75%' from the topmost of the box */ object-position: 50% 75%; } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: 50% 75%</p> <img id="object" src=</body></html> |
Output:
Example #3:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* Setting the object-position to 'left' from the leftmost of the box and 'bottom' from the topmost of the box */ object-position: left bottom; } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: left bottom</p> <img id="object" src=</body></html> |
Output:
Example #4:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* Setting the object-position to 'center' from the leftmost of the box and 'top' from the topmost of the box */ object-position: center top; } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: center top</p> <img src=</body></html> |
Output:
- initial: This sets the default value of the property, that is 50% 50%, where the element is in the middle of the content box.
Example:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* sets the default value of object-position property */ object-position: initial } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: initial</p> <img src=</body></html> |
Output:
- inherit: This receives the property from the parent element. When used with the root element, the initial property is used instead.
Example:
html
<!DOCTYPE html><head> <title>CSS object-position</title> <style> #parent { object-position: 60% 80%; } img { width: 300px; height: 250px; background-color: silver; object-fit: none; /* inherits the property of the parent */ object-position: inherit; } </style></head><body> <h1 style="color: green">GeeksforGeeks</h1> <p>object-position: inherit</p> <div id="parent"> <img src= </div></body></html> |
Output:
Supported Browsers: The browser supported by object-position property are listed below:
- Google Chrome 32
- Edge 79
- Firefox 36
- Opera 19
- Safari 10
![https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"](https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png"){kind=link}
Please Login to comment...