CSS Object Position


🔹 What is CSS object-position?

The CSS object-position property specifies the alignment (position) of replaced content like images or videos inside their container when the content is resized using object-fit (especially with cover or contain).

It controls which part of the image is visible when it is cropped or fitted.


🔸 Syntax

img {
  object-position: 50% 50%; /* horizontal vertical */
}
  • First value: horizontal position (left to right)

  • Second value: vertical position (top to bottom)


🔸 Accepted Values

Value Type Description Examples
Keywords Position by keywords top, bottom, left, right, center
Percentages Percentage positions relative to container object-position: 25% 75%;
Length units Pixels, em, rem, etc. object-position: 10px 20px;

🔸 Default Value

object-position: 50% 50%; — centers the content horizontally and vertically.


🔸 Examples

1. Center Image
img {
  object-fit: cover;
  object-position: center;
}
2. Align Image to Top Left
img {
  object-fit: cover;
  object-position: left top;
}
3. Position Image 30% from left and 70% from top
img {
  object-fit: cover;
  object-position: 30% 70%;
}
4. Using Pixels
img {
  object-fit: cover;
  object-position: 10px 20px;
}

🟠 When to Use object-position?

  • When using object-fit: cover or contain, and you want to control which part of the image remains visible.

  • For cropping images with focus on important areas (like faces).

  • Adjusting image position inside fixed containers without stretching.


Practice Questions

Q1. Center an image with object-position.

Q2. Align image top-right inside its container.

Q3. Position image 25% from left and 50% from top.

Q4. Use pixels to position image 15px from left and 30px from top.

Q5. Combine object-fit: cover with object-position: bottom center.

Q6. Align image to bottom-left corner.

Q7. Use object-position to show the upper-left quarter of an image.

Q8. Position image using keywords right and center.

Q9. Set object-position to 0 0 (top-left).

Q10. Adjust image position responsively with media queries.


Go Back Top