CSS object-positionProperty
Example
Reset the image size according to the container size, and set the position of the image:
img.a {
width: 200px;
height: 400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Try it Yourself »
Tag definition and usage instructions
The object-position property is generally used withobject-fitUsed together to set the position of an element.
object-position is generally used for img and video tags.
| Default Value: | 50% 50% |
|---|---|
| Inherited: | Yes. |
| animation: | Yes.AboutCSS Animations Try it Yourself » |
| version: | CSS3 |
| JavaScript Syntax: | object.style.objectPosition="0 10%" Try it Yourself » |
Browser Support
The numbers in the table indicate the first browser version number that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
Syntax
object-position: position|initial|inherit;
Property value
| Value | Description | |
|---|---|---|
| position | Specifies the position of the image or video in the container. The first value is the x-coordinate position, and the second value is the y-coordinate position. The ways of representation are:object-position: 50% 50%; object-position: right top; object-position: left bottom; object-position: 250px 125px; |
|
| initial | Set as default value,Aboutinitial | |
| inherit | Inherits the property from the parent element of this element.Aboutinherit |