CSS object-position property

Course recommendation:

Definition and Usage

object-position attribute used with object-fit can specify how x/y coordinates are used to position <img> or <video> within their 'own content box'.

See also:CSS Tutorial:

CSS object-fitCSS Reference Manual:

CSS object-positionHTML DOM Reference Manual:

objectPosition attribute

Example

Adjust the size of the image to fit its content box and move the image 5px from the left and 10% from the top within the content box:
  img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
border: 5px solid red;

}

Try it yourself

CSS syntax Descriptionobject-position:

|initial|inherit;

Attribute value Value
Description

Position

Specifies the position of an image or video within its content box.

The first value controls the x-axis, and the second value controls the y-axis.
Sets this property to its default value. See Can be a string (left, center, or right) or a number (in px or %). Negative values are allowed. Sets this property to its default value. SeeAnimation-related properties
Inherits this property from its parent element. See initial Inherits this property from its parent element. SeeAnimation-related properties

inherit

Technical details Default value:
50% 50% Inheritance:
Yes Animation creation:Supported. See:Animation-related properties
. Version:
CSS3 JavaScript syntax:

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0