CSS

CSS

🎯 CSS object-position Property

The object-position CSS property defines how an image or video is positioned inside its container after being resized with object-fit.

It allows you to control which part of a cropped image remains visible inside the box.

πŸ”Ή Why Use object-position?

  • Key Benefits

  • Controls visible area of cropped images.
  • Improves image alignment in responsive layouts.
  • Works perfectly with object-fit.
  • Useful for hero images, thumbnails, and sliders.

🧩 Syntax

CSS

img {
    object-fit: cover;
    object-position: center top;
}

The image is cropped using cover, and the top center area is prioritized.

πŸ”Ή object-position Values

  • Available Values

  • center β†’ Centers the image inside the box
  • top β†’ Aligns image to top
  • bottom β†’ Aligns image to bottom
  • left β†’ Aligns image to left
  • right β†’ Aligns image to right
  • % β†’ Precise positioning (e.g., 25% 75%)
  • length β†’ Pixel-based positioning

πŸ“Œ Examples

1️⃣ Align Right

CSS

img {
    object-fit: cover;
    object-position: right;
}

2️⃣ Show Top Area

CSS

img {
    object-fit: cover;
    object-position: top;
}

3️⃣ Center Position (Default)

CSS

img {
    object-fit: cover;
    object-position: center;
}

4️⃣ Percentage Position

CSS

img {
    object-fit: cover;
    object-position: 25% 75%;
}

  • πŸ“Œ How Percentage Works

  • 25% β†’ moves image toward left side
  • 75% β†’ moves image toward bottom

  • 🧠 Summary

  • object-position controls where the image is placed inside its container.
  • It works together with object-fit.
  • Useful for cropping control in modern UI design.
CSS object-fit
CSS column-count