object-position
Which part of a cropped `<img>` or `<video>` stays visible.
Syntax
object-position: x y;Values
| Parameter | Type | Description |
|---|---|---|
| center | top | right | bottom | left | keyword | Keywords, one or two: `center top`. |
| x y | length | Offsets: `20% 50%`, `10px 0`. |
Examples
The left, central and right parts of the same photo:
<style>
img { width: 100px; height: 100px; object-fit: cover; border: 1px solid gray; }
</style>
<img src="/media/photo-400x250.jpg" alt="" style="object-position: left;">
<img src="/media/photo-400x250.jpg" alt="" style="object-position: center;">
<img src="/media/photo-400x250.jpg" alt="" style="object-position: right;">Notes
Works together with object-fit: cover or none. The default is center.
See also
- object-fit — How the picture of an `<img>` or `<video>` fits into the element's box.
- background-position — Where the background image is placed inside the block.
Related recipes
In the tutorial
- Responsive images — How pictures adapt to the screen — max-width, aspect-ratio, object-fit, the srcset and sizes attributes, the picture element.