object-position
Decides which part is kept when a replaced element (img, video) is larger than its container. This is the class that fixes heads being cropped out of images scaled with ofc.
Class List
| Class | CSS | Description |
|---|---|---|
opc | object-position: center | Centered anchor. Cropped evenly on all sides (default) |
opt | object-position: top | Top anchor. Keeps the top of the image, crops the bottom |
opb | object-position: bottom | Bottom anchor. Keeps the bottom of the image, crops the top |
opl | object-position: left | Left anchor. Keeps the left of the image, crops the right |
opr | object-position: right | Right anchor. Keeps the right of the image, crops the left |
Core Concept
object-position does nothing on its own. It only shifts the anchor point of the cropping or letterboxing that happens when the image size differs from the container. So it must always be paired with an object-fit class.
| Class | CSS | Effect of object-position |
|---|---|---|
ofc | object-fit: cover | Decides which part gets cropped away. The most common pairing |
ofct | object-fit: contain | Decides where the image sits inside the letterbox |
ofn | object-fit: none | Moves the anchor of the image placed at its intrinsic size |
ofsd | object-fit: scale-down | Behaves like contain when scaled down, otherwise like none |
off | object-fit: fill | No effect. The image is stretched to fill, leaving nothing to move |
The default is center, so without any class the exact middle of the image is always the anchor. That default is the reason heads get cut off in portrait thumbnails.
Visual Comparison
Cropped horizontally — a tall, narrow container
Filling a narrow container with a wide image via ofc crops the left and right sides. Here opl keeps the left edge and opr keeps the right edge. Nothing is cropped vertically, so opt and opb look identical.
opc
'%2F%3E%0A%3Cg%20stroke%3D'%230B0B10'%20stroke-width%3D'6'%20opacity%3D'0.45'%3E%0A%3Cline%20x1%3D'400'%20y1%3D'0'%20x2%3D'400'%20y2%3D'300'%2F%3E%3Cline%20x1%3D'800'%20y1%3D'0'%20x2%3D'800'%20y2%3D'300'%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D'%230B0B10'%20font-family%3D'Helvetica%2C%20Arial%2C%20sans-serif'%20font-size%3D'54'%20font-weight%3D'700'%20text-anchor%3D'middle'%3E%0A%3Ctext%20x%3D'200'%20y%3D'170'%3ELEFT%3C%2Ftext%3E%3Ctext%20x%3D'600'%20y%3D'170'%3ECENTER%3C%2Ftext%3E%3Ctext%20x%3D'1000'%20y%3D'170'%3ERIGHT%3C%2Ftext%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E)
opt
opb
opl
opr
Cropped vertically — a wide, short container
Filling a short container with a tall image crops the top and bottom instead. Now only opt and opb make a difference. The key idea is that only the axis that is actually being cropped responds.
opc
'%2F%3E%0A%3Cg%20stroke%3D'%230B0B10'%20stroke-width%3D'6'%20opacity%3D'0.45'%3E%0A%3Cline%20x1%3D'0'%20y1%3D'400'%20x2%3D'300'%20y2%3D'400'%2F%3E%3Cline%20x1%3D'0'%20y1%3D'800'%20x2%3D'300'%20y2%3D'800'%2F%3E%3C%2Fg%3E%0A%3Cg%20fill%3D'%230B0B10'%20font-family%3D'Helvetica%2C%20Arial%2C%20sans-serif'%20font-size%3D'40'%20font-weight%3D'700'%20text-anchor%3D'middle'%3E%0A%3Ctext%20x%3D'150'%20y%3D'80'%3ETOP%3C%2Ftext%3E%3Ctext%20x%3D'150'%20y%3D'615'%3ECENTER%3C%2Ftext%3E%3Ctext%20x%3D'150'%20y%3D'1150'%3EBOTTOM%3C%2Ftext%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E)
opt
opb
opl
opr
Position Comparison
| Class | Position | Cropped side | Primary use cases |
|---|---|---|---|
opc | center | Half from each side, top and bottom | Scenery, backgrounds, patterns where the middle matters |
opt | top | Bottom | Profile portraits, photos with faces near the top |
opb | bottom | Top | Product shots, photos where the ground plane matters |
opl | left | Right | Left-aligned logos, subjects sitting on the left |
opr | right | Left | Right-aligned banners, subjects sitting on the right |
Class Details
opcobject-position: center
The browser default. The image is cropped evenly on every side around its exact middle. Ideal for scenery or patterns where the subject sits in the center, and also useful as an explicit reset when overriding another direction class conditionally.
Cropped horizontally — a tall, narrow container
Cropped vertically — a wide, short container
<!-- Default anchor: the exact middle of the image -->
<div class="w100p h20rem oh br8px">
<img src="landscape.jpg" alt="landscape" class="w100p h100p ofc opc" />
</div>
<!-- Circular avatar -->
<img src="avatar.jpg" alt="avatar" class="w6rem h6rem ofc opc br50p" />
<!-- Centered inside a letterbox -->
<div class="w100p h20rem bg18181B br8px">
<img src="product.png" alt="product" class="w100p h100p ofct opc" />
</div>Common Combinations
w100p h20rem ofc opc | square thumbnail, center crop |
w6rem h6rem ofc opc br50p | circular avatar, default alignment |
w100p h20rem ofct opc | centered inside the letterbox |
w100p h12rem ofc opc | wide list thumbnail |
optobject-position: top
Pins the top edge of the image to the top of the container. When cropped vertically only the bottom is removed, so heads and faces survive. The most practical choice for card thumbnails and profile banners featuring people.
Cropped horizontally — a tall, narrow container
Cropped vertically — a wide, short container
<!-- Portrait card thumbnail: keeps the face -->
<div class="oh br8px bg18181B">
<img src="person.jpg" alt="person" class="w100p h20rem ofc opt" />
<div class="p16px fs14px cFAFAFA">Card Title</div>
</div>
<!-- Hero banner anchored to the top -->
<div class="w100p h30rem oh">
<img src="hero.jpg" alt="hero" class="w100p h100p ofc opt" />
</div>Common Combinations
w100p h20rem ofc opt | portrait card thumbnail (keeps the face) |
w100p h30rem ofc opt | hero banner anchored to the top |
opbobject-position: bottom
Pins the bottom edge of the image to the bottom of the container. When cropped vertically the sky or empty space at the top disappears first. Use it for products resting on a surface, building bases, and images where shadows or reflections matter.
Cropped horizontally — a tall, narrow container
Cropped vertically — a wide, short container
<!-- Product thumbnail emphasizing the base -->
<div class="w100p h20rem oh br8px">
<img src="shoe.jpg" alt="shoe" class="w100p h100p ofc opb" />
</div>
<!-- Background image aligned to the bottom -->
<div class="w100p h24rem oh pr">
<img src="city.jpg" alt="city" class="w100p h100p ofc opb" />
</div>Common Combinations
w100p h20rem ofc opb | product thumbnail emphasizing the base |
w100p h24rem ofc opb | background image aligned to the bottom |
oplobject-position: left
Pins the left edge of the image to the left of the container. When cropped horizontally the right side is removed, preserving subjects or logos placed on the left. Frequently used when squeezing a wide banner into a narrow card.
Cropped horizontally — a tall, narrow container
Cropped vertically — a wide, short container
<!-- Wide banner squeezed into a narrow card -->
<div class="w100p h20rem oh br8px">
<img src="banner.jpg" alt="banner" class="w100p h100p ofc opl" />
</div>
<!-- Logo pinned to the left edge -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
<img src="logo.svg" alt="logo" class="w100p h100p ofct opl" />
</div>Common Combinations
w100p h20rem ofc opl | card preserving a left-side subject |
w12rem h6rem ofct opl p8px | logo pinned to the left edge |
oprobject-position: right
Pins the right edge of the image to the right of the container. When cropped horizontally the left side is removed. Suited to banners with the subject skewed right, and hero layouts that overlay text on the left.
Cropped horizontally — a tall, narrow container
Cropped vertically — a wide, short container
<!-- Banner with the subject skewed right -->
<div class="w100p h20rem oh br8px">
<img src="promo.jpg" alt="promo" class="w100p h100p ofc opr" />
</div>
<!-- Hero with text overlaid on the left -->
<div class="pr w100p h30rem oh">
<img src="hero.jpg" alt="hero" class="w100p h100p ofc opr" />
</div>Common Combinations
w100p h20rem ofc opr | banner preserving a right-side subject |
w100p h30rem ofc opr | hero with text overlaid on the left |
Common Patterns
The most common pattern is pairing ofc with a direction class. Use opt for people and the default opc for scenery.
<!-- Portrait thumbnail grid: keep faces with opt -->
<div class="dg gtcr3-1fr gap2rem sm-gtc1fr">
<div class="oh br8px bg18181B">
<img src="p1.jpg" alt="" class="w100p h20rem ofc opt" />
<div class="p16px fs14px cFAFAFA">Member A</div>
</div>
<div class="oh br8px bg18181B">
<img src="p2.jpg" alt="" class="w100p h20rem ofc opt" />
<div class="p16px fs14px cFAFAFA">Member B</div>
</div>
</div>
<!-- Wide banner in a narrow slot: keep the left subject -->
<div class="w100p h12rem oh br8px">
<img src="banner.jpg" alt="" class="w100p h100p ofc opl" />
</div>
<!-- Letterboxed logo aligned to the left -->
<div class="w12rem h6rem bg0F0F17 br8px p8px">
<img src="logo.svg" alt="" class="w100p h100p ofct opl" />
</div>
<!-- Responsive: top anchored on mobile, centered on desktop -->
<img src="hero.jpg" alt="" class="w100p h20rem ofc opt md-opc" />Tips & Notes
Useless without object-fit
off (fill) stretches the image to match the container exactly, so there is no cropping and no letterboxing. With no spare room, object-position has nothing to move. Pair it with ofc, ofct, ofn, or ofsd.
Use opt for portrait thumbnails
For profile photos and card thumbnails containing people, ofc opt is the safe combination. When the image is cropped vertically the head and face survive while the empty space near the feet is removed first.
An alignment tool under contain
Combined with ofct it controls alignment inside the letterbox rather than cropping. To pin a logo to the left edge, use ofct opl.