• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Object Position

← Previous Next →

🔹 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.

CSS Object Position Quiz

Q1: What does object-position control?

A. Size of the image
B. Alignment of image inside container
C. Image opacity
D. Border radius

Q2: What is the default value of object-position?

A. left top
B. 0 0
C. 50% 50%
D. center top

Q3: Which values can be used in object-position?

A. Only keywords
B. Only percentages
C. Keywords, percentages, and length units
D. Only pixels

Q4: If object-fit: cover crops the image, which property controls visible part?

A. object-position
B. object-fit
C. background-position
D. clip-path

Q5: What does object-position: left bottom; do?

A. Aligns image center
B. Positions image top-left
C. Aligns image bottom-left inside container
D. Crops image entirely

Q6: Can object-position accept two percentage values?

A. Yes
B. No
C. Only one
D. Only for videos

Q7: Which CSS property must be used with object-position to see its effect?

A. width
B. object-fit (usually cover or contain)
C. float
D. margin

Q8: What does object-position: 0 0; mean?

A. Top-left corner alignment
B. Center alignment
C. Bottom-right corner alignment
D. Default alignment

Q9: Is object-position applicable to background images?

A. Yes
B. No, use background-position for backgrounds
C. Only in SVG
D. Only with filters

Q10: What unit is NOT valid in object-position?

A. %
B. px
C. em
D. vh (Note: While some browsers may accept, it’s not standard for object-position)
← Previous Next →
Login
Go Back Top