Previous
Written by: rJTutorial Team | Last Updated:

CSS Object Position

While the object-fit property defines how an image or video scales to fit its container, the object-position property determines where that content sits within the box. Think of object-fit as the zoom and object-position as the camera pan.

By default, browsers center replaced elements (like <img> or <video>) within their content boxes. However, if you are using object-fit: cover, you might find that the most important part of your image—like a person's face or a product—is being cropped out. object-position allows you to shift the focal point to ensure the right part of the image remains visible.

Developer Tip: If you've used background-position for CSS background images, you already know how object-position works! They use the exact same coordinate logic, but object-position is specifically for HTML tags like <img> and <video>.

Basic Syntax

The property typically takes two values: the horizontal (x) position and the vertical (y) position. If you only provide one value, the second defaults to 50% (center).

.object-fit-image {
    width: 100%;
    height: 100%;
    /* Define how the image stretches/crops */
    object-fit: cover; 
    
    /* Define the focal point: x-axis y-axis */
    object-position: 50% 10%; 
}
Best Practice: Always pair object-position with object-fit: cover or object-fit: contain. If the image isn't being resized or cropped, moving its position usually won't have a visible effect because the image already fills the space perfectly.

Values for object-position

Horizontal Position (X-axis):

  • Keywords: left, center, right.
  • Percentages: 0% (left), 50% (center), 100% (right).
  • Length values: Precise units like 20px or 2rem offset from the left edge.

Vertical Position (Y-axis):

  • Keywords: top, center, bottom.
  • Percentages: 0% (top), 50% (center), 100% (bottom).
  • Length values: Precise units like 10px or 1.5rem offset from the top edge.
Common Mistake: Forgetting the order of values. It is always Horizontal first, then Vertical. Writing object-position: top left; is valid, but object-position: 20% 80%; means 20% from the left and 80% from the top.

Example Usage

In real-world web development, this is most commonly used for "Hero" headers or profile avatars where the subject isn't perfectly centered in the original photo.

.object-fit-container {
    width: 300px;
    height: 200px;
    border: 2px solid #333;
    overflow: hidden;
    border-radius: 8px;
}

.object-fit-image {
    width: 100%;
    height: 100%;
    /* Crop the image to fill the container */
    object-fit: cover; 
    /* Shift the "camera" to focus on the bottom of the image */
    object-position: center bottom; 
}

HTML

<div class="object-fit-container">
    <img src="landscape.jpg" alt="Mountain Landscape" class="object-fit-image">
</div>

In this example:

  • .object-fit-container acts as a fixed-size window or "frame."
  • object-fit: cover ensures the image fills that frame without leaving empty gaps, even if the aspect ratios don't match.
  • object-position: center bottom; ensures that if the image must be cropped, the browser cuts off the top of the image and keeps the bottom (perhaps where the foreground detail is) in view.
Watch Out: If you use absolute length values (like 100px), the image might move entirely out of the frame if the container is smaller than that value. Percentages are generally much safer for responsive layouts.

Additional Considerations

  • Responsive Design: You can change the object-position inside Media Queries. For example, on a mobile screen, you might want object-position: center, but on wide desktops, you might shift it to left center to avoid overlapping with text.
  • Art Direction: This property is a lifesaver when using CMS-uploaded images where you can't control the original cropping. It gives developers a way to perform "programmatic art direction."
  • Browser Support: object-position is supported in all modern browsers (Chrome, Firefox, Safari, Edge). If you must support Internet Explorer, you will need a polyfill or fallback to background-image.
Best Practice: When displaying portraits of people, setting object-position: center top; is often a safer default than the standard center center, as it prevents heads from being accidentally cropped out of the frame.

By mastering object-position, you gain full control over the visual balance of your UI, ensuring that your key content remains the center of attention regardless of the screen size.

Previous