CSS object-position Property

1 April 2025 | Category: CSS

The object-position property in CSS is used in conjunction with the object-fit property. It specifies the alignment of content (such as images or videos) inside its container, particularly when the content is scaled, cropped, or otherwise resized.

When using object-fit (for example, cover, contain, or fill), the object-position property controls where the content is positioned within its box. This is useful for managing how images or other media elements are aligned inside containers of varying sizes.

1. Syntax of `object-position`

element {
  object-position: x-axis y-axis;
}

x-axis: This defines the horizontal position. It can be a length, a percentage, or a keyword like left, center, or right.
y-axis: This defines the vertical position. It can also be a length, percentage, or keyword like top, center, or bottom.

Example:

img {
  object-position: 50% 50%; /* centers the image */
}

In this example, the image will be positioned at the center of its container.

2. Values of `object-position`

1. Keywords:

left: Aligns the object to the left of its container.
right: Aligns the object to the right of its container.
top: Aligns the object to the top of its container.
bottom: Aligns the object to the bottom of its container.
center: Aligns the object to the center (both horizontally and vertically).

Example:

img {
  object-position: left top; /* Aligns the object to the top left corner */
}

2. Length and Percentage:

You can also specify exact positions using length values (e.g., pixels, em, etc.) or percentages.

Example (Pixels):

img {
  object-position: 10px 20px; /* 10px from the left, 20px from the top */
}

Example (Percentage):

img {
  object-position: 50% 50%; /* 50% from the left, 50% from the top */
}

In this case, 50% 50% will place the image at the center of the container.

3. Practical Examples

1. Using `object-position` with `object-fit` for Image Galleries

In a responsive image gallery, you might want to ensure that images are positioned in a way that highlights important parts of the image (e.g., a person’s face or the center of the image) even when the image is resized or cropped.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object Position Example</title>
  <style>
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
    }

    .gallery img {
      width: 100%;
      height: 200px;
      object-fit: cover; /* Cover the container */
      object-position: center top; /* Position image to the top center */
    }
  </style>
</head>
<body>

  <div class="gallery">
    <img src="https://via.placeholder.com/400" alt="Image 1">
    <img src="https://via.placeholder.com/450" alt="Image 2">
    <img src="https://via.placeholder.com/500" alt="Image 3">
  </div>

</body>
</html>

In this example, the images will be scaled using object-fit: cover;, ensuring that they fill the container while maintaining their aspect ratio. The object-position: center top; ensures that the image is aligned to the top center of the container, which might be useful for emphasizing a particular area of the image.

2. Using `object-position` for Video Content

When working with video content, you might want to control its alignment in a similar way as images. This can be useful, for example, in a video gallery or a background video.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Object Position for Video</title>
  <style>
    video {
      width: 100%;
      height: 300px;
      object-fit: cover; /* Cover the container */
      object-position: bottom right; /* Align the video to the bottom right */
    }
  </style>
</head>
<body>

  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>

</body>
</html>

Here, the video will be scaled to cover the container with object-fit: cover;, and object-position: bottom right; ensures the video is aligned to the bottom-right corner of the container.

4. Browser Support

The object-position property is supported by most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, Internet Explorer does not support the object-position property, so be aware of compatibility issues with older browsers.

5. Conclusion

The object-position property is a valuable tool for controlling the alignment of content (like images and videos) inside its container. It works well in combination with the object-fit property to help you create responsive layouts where media is properly sized and positioned.

Key Takeaways:

Use object-position to control the positioning of media content inside a container.
Combine it with object-fit to ensure proper scaling and alignment.
Values include keywords (top, center, bottom, left, right) and length or percentage values.