Style objectPosition Property

Definition and Usage

objectPosition attribute is used to specify <img> or <video> How to position it within its own content box.

See also:

CSS Tutorial:CSS object-fit

CSS Reference Manual:object-position property

Example

Adjust the size of the image to fit its content box and position it 5px from the left and 10% from the top of the content box:

document.getElementById("myImg").style.objectPosition = "0 10%";

Try It Yourself

Syntax

Return the objectPosition property:

object.style.objectPosition

Set the objectPosition property:

object.style.objectPosition = "position|initial|inherit"

Property Value

Value Description
position

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

The first value controls the x-axis, the second value controls the y-axis.

Can be a string (left, center, or right) or a number (in px or %).

Allows negative values.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default value: 50% 50%
Return value: A string or number representing the position of the element within its content box.
CSS Version: CSS3

Browser Support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
31.0 16.0 36.0 10.1 19.0