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.