CSS object-position Property
Example
Resize an image to fit its content box, and position the image 5px from the left and 10% from the top inside the content box:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Try it Yourself »
Definition and Usage
The object-position property is used together with object-fit to specify how an <img> or <video> should
be positioned with x/y coordinates inside its "own content box".
| Default value: | 50% 50% |
|---|---|
| Inherited: | yes |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.objectPosition="0 10%" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS Syntax
object-position: position|initial|inherit;
Property Values
| Value | Description |
|---|---|
| position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS object-fit
CSS reference: CSS object-fit
HTML DOM reference: The objectPosition property
