object-position

You will be able to choose which part of an image or video remains visible when CSS crops or scales it inside a fixed-size box.

What it is

object-position is a CSS property for replaced elements such as <img>, <video>, and <embed>. It works like a camera focus control: the element box is the frame, and the media inside it is the picture. When the media does not exactly match the frame, object-fit decides how to scale it, and object-position decides which part of the scaled media is placed in the frame.

Think of a photo inside a window. If the photo is larger than the window, you can slide it left, right, up, or down to decide what the viewer sees. Related terms include object-fit, replaced element, intrinsic size, and aspect ratio.

Why it matters

• Keeps important subjects visible in thumbnails, cards, and hero images.
• Prevents faces from being cropped by generic center cropping.
• Works with responsive layouts where image boxes change size.
• Provides a simple alternative to editing or cropping source images.
• Can be combined with object-fit: contain to position smaller media inside a larger box.

Syntax or steps

The smallest useful pattern is:

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

object-position accepts one or two values. If you give two values, the first is horizontal and the second is vertical. If you give one value, the missing axis defaults to center. The default position is 50% 50%. Common values are keywords such as top, bottom, left, right, and center, as well as percentages and lengths.

Percentages are relative to the difference between the media and the element box: 0% aligns the media's left or top edge with the box edge, 100% aligns the media's right or bottom edge with the box edge, and 50% centers it.

Example

<img class="card-image" src="mountain.jpg" alt="Mountain landscape">

.card-image {
  width: 320px;
  height: 180px;
  object-fit: cover;
  object-position: 75% 20%;
}

Part by part:

• width and height create a fixed frame.
• object-fit: cover scales the image so it fills the frame, cropping overflow.
• object-position: 75% 20% moves the visible area toward the right side and near the top.
• If the mountain peak is in the upper right, this keeps it in view.

Common mistakes

• Using object-position without object-fit. If the image is not being scaled or cropped, the position may have little visible effect. Add object-fit: cover or contain.
• Expecting object-position to work with object-fit: fill. fill stretches the image to the box, so there is no remaining space to position.
• Using percentages as if they move the image by a percentage of its own size. They position the image within the box based on the available difference.
• Applying it to non-replaced elements like <div>. It does not position normal content; use layout properties such as margin, align-items, or background-position instead.

When to use it

Use object-position when you need to choose the visible part of an image or video inside a sized element. Compare it with nearby tools:

Practice

Guided exercise: Create an image box that is 400px wide and 250px tall. Use object-fit: cover and object-position: center top.

img {
  width: 400px;
  height: 250px;
  object-fit: cover;
  object-position: center top;
}

Expected result: the top of the image stays visible, while the bottom may be cropped.

Challenge: Adjust the values so a subject on the left side of the image remains visible. Hint: try object-position: left center or a percentage such as 20% 50%.

Quick check

Question: Which CSS keeps the bottom of a cover-cropped image visible?

Answer: object-fit: cover; object-position: bottom; or object-position: 50% 100%;.

Summary

object-position controls where the media sits inside a replaced element's box after object-fit scales it. It is the practical way to choose the visible part of an image or video without editing the source file. Use it with cover or contain, and remember that it affects the media inside the element, not the element itself.