CSS object-position

Imagine cropping a group photo down to a small frame -- object-fit decides whether the photo gets squished, stretched, or cropped to fit, but object-position decides WHICH part of the photo stays in frame: the person on the left, or the one on the right.

In this page:

What object-position Controls
Using Percentage and Keyword Values
Why It Only Matters With Certain object-fit Values
Repositioning a Portrait in a Landscape Box
Combining With Video Elements

What object-position Controls

object-position sets the alignment of a replaced element's content (an img or video) within its box after object-fit has determined the scaling behavior -- it answers 'which part of the media stays visible' when cropping or letterboxing occurs, using the same two-value syntax as background-position.

Example: What object-position Controls

css

<style>
img {
  width: 200px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}
</style>
<img src="https://placehold.co/400x400" alt="Which part of the media stays visible">

Using Percentage and Keyword Values

object-position accepts both keywords (top, bottom, left, right, center) and percentage or length values, where percentages describe how far the image's corresponding point is offset from the box's edge -- 0% 0% is top-left, 100% 100% is bottom-right.

Example: Using Percentage and Keyword Values

css

<style>
.tl {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 0% 0%;
}
.br {
  width: 150px;
  height: 100px;
  object-fit: cover;
  object-position: 100% 100%;
}
</style>
<img class="tl" src="https://placehold.co/400x400" alt="Top-left">
<img class="br" src="https://placehold.co/400x400" alt="Bottom-right">

Why It Only Matters With Certain object-fit Values

object-position has no visible effect when object-fit is fill (the image is stretched to exactly match the box, leaving no extra space to reposition) or when the image's natural size already matches the box exactly -- it's most useful with cover and contain, where cropping or letterboxing actually leaves room to choose.

Example: Why It Only Matters With Certain object-fit Values

css

<style>
.fill {
  width: 150px;
  height: 100px;
  object-fit: fill;
  object-position: top;
}
</style>
<img class="fill" src="https://placehold.co/400x400" alt="object-position has no visible effect with fill">

Repositioning a Portrait in a Landscape Box

A common real use case is a tall portrait photo placed in a wide landscape-shaped card: object-fit: cover crops the photo to fill the box, and object-position: top ensures a person's face (usually near the top of a portrait) stays visible instead of being cropped out at the center.

Example: Repositioning a Portrait in a Landscape Box

css

<style>
.portrait {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<img class="portrait" src="https://placehold.co/300x500" alt="Face stays visible near the top">

Combining With Video Elements

object-position works identically on video elements as on images, letting a cropped background video keep its important visual content (like a speaker's face in a webcam recording) framed correctly regardless of the player's aspect ratio.

Example: Combining With Video Elements

css

<style>
video {
  width: 300px;
  height: 120px;
  object-fit: cover;
  object-position: top;
}
</style>
<video controls></video>

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Object Fit Next Lesson → CSS Masking