object-position
Positioning image or video content inside its element box.
Overview
| Class | Declarations |
|---|---|
object-top | object-position: top;
|
object-bottom | object-position: bottom;
|
object-left | object-position: left;
|
object-right | object-position: right;
|
object-center | object-position: center;
|
object-position:<position> | object-position: <position>;
|
Examples
Center cropped media
object-center distributes crop equally between opposite edges. This 240 × 100 frame shows a 240 × 150 cover image, so 25px is clipped from both top and bottom.
<!-- Center · equal vertical crop --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-center object-cover" /><!-- Top · crop only at the bottom --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-cover object-top" />Generated CSS
@layer utilities { .object-center { object-position: center }}The class positions the content inside a replaced element. It does not align the image element within its parent. Both boxes keep the same dimensions and fit mode.
Pin the top of an image
object-top aligns the source’s top edge with the frame. Compare it with bottom alignment; the sun and mountain peaks expose the vertical shift.
<!-- Top · preserve the upper edge --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-cover object-top" /><!-- Bottom · preserve the lower edge --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-bottom object-cover" />Choose the edge that contains the important subject. Positioning only becomes visible on an axis where content and box dimensions differ; changing horizontal alignment would have no effect in this example.
Use precise positions
Two values specify horizontal then vertical position. Percentages distribute the available space, which is negative on a cropped axis. Edge offsets instead place a source edge at a fixed distance.
<!-- 50% 25% · 12.5px top crop --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-cover object-position:50%|25%" /><!-- Left 12px · top 8px --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-cover object-position:left|12px|top|8px" />With 50px of excess image height, 25% moves the image 12.5px upward. The second sample moves its top-left corner 12px right and 8px down, exposing the element background along those edges. Values are not coordinates of a point to center.
Apply conditionally
Widen to sm to pin the top edge. Print returns to centered cropping.
<!-- Center → top at sm --><img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block h:100px w:240px max-w:100% bg-surface-base object-center object-cover object-center@print object-top@screen@sm" />The native viewport condition changes the image content’s position. The element’s box and source scaling stay fixed.