object-position

The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it.

img {
  object-position: right bottom;
}

It’s important to note that in order move an element around using object-position, the object-fit property must be used alongside it and be set to a value of none.

img {
  object-fit: none;
  object-position: right bottom;
}

object-fit determines how the element responds to the height and width of its container (like, whether it fills, or covers, or contains the space). object-position sets where that element sits within the container.

While it’s probably most common to see object-position used on <img> elements, it can be used on other types of replaced elements, like <iframe>, <video>, and <embed>.

object-position is part of the CSS Images Module Level 3 specification.

Syntax

object-position: <position>where <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage>

That’s just a really long way of explaining that we can use keywords or length values to set an element’s alignment within a container.

Values

/* Positional values */
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

Examples

Let’s look at a few different examples of the object-position property at work.

Basic usage

Details

The example above demonstrates on how object-position aligns an image element relative to its parent container when the image is smaller than the parent container. Again, note the use of object-fit: none in there to make object-position work.

Image exceeds the container

Details

This demo demonstrates how an image element that is larger than its parent container behaves with different object-position values.

Other types of replaced content

Details

This example shows object-position used with other types of replaced content, including <video> and <iframe>.

Tricks!

Responsive image crop

The example below has a basic responsive layout with image above text. Perhaps the man in this image is the subject of the article, and as the screen size gets smaller, we want to maintain focus on that subject. object-position is used here to maintain that focus, cropping the image at a particular break point with object-position: left bottom.

Mosaic faces

Outside of positional focus, object-position’s practical uses are limited. However, it is a property you can get somewhat creative with when it comes to page layout and design.

Stylized borders

Another cool thing we can do is use the negative space of the parent container to draw fake borders. We set a background color on the parent container, drop in an image that’s smaller than the container, then use object-position to align the image. What’s left sorta looks like a border. It gets super interesting when we start putting many containers together because it looks as though a line is drawn between them, which can make neat patterns.

Browser Support

More information

Related properties