CSS object-position Property

❮ Previous Complete CSS Reference Next ❯

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".

Show demo ❯

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	Demo
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	Try it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS object-fit

CSS reference: CSS object-fit

HTML DOM reference: The objectPosition property