CSS object-position
object-position tells object-fit where to place the kept portion of an image or video. Default is centre.
Values
| Value | Effect |
|---|---|
center (default) | Kept area centred in the box. |
top / bottom | Anchor to top or bottom — useful for portraits (keeps faces). |
left / right | Anchor to one side. |
x% y% | Precise position as percentages. |
20px 40px | Pixel offsets from top-left. |
Keep the subject in frame
CSS
.portrait {
width: 200px;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: top; /* faces tend to be in the top third */
}
Per-image overrides
Different photos need different crops. Add a small modifier:
CSS
.photo { object-fit: cover; }
.photo--top { object-position: top; }
.photo--bottom-third { object-position: 50% 67%; }
Tip:
object-position is the cropping equivalent of background-position. If you know one, you know the other.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS object-position</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Keep faces in frame by anchoring crops to the top.
.portrait { object-fit: cover; object-position:
; }
Single keyword for the upper edge.
Discussion
Loading…