object-position

Avatar of Matt DeCamp
Matt DeCamp on (Updated on )

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;
}
An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;.

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

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
3236No7910

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
1231244.4.3-4.4.410.0-10.2

More information