CSS object-position

Control which part of an image or video is visible inside a fixed-size box using object-position.

On this page

object-position

The object-position property defines how the content of a replaced element (like <img> or <video>) is positioned inside its box.

It is most useful together with object-fit: cover, where part of the image may be cropped.

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

Default value is usually 50% 50% (center).

When using object-fit: cover, the image fills the container and may be cropped. object-position lets you choose which area stays visible.

Top (keep faces near the top):

.thumb img {
  object-fit: cover;
  object-position: top;
}

Bottom:

.thumb img {
  object-fit: cover;
  object-position: bottom;
}

Left / Right:

.thumb img {
  object-fit: cover;
  object-position: left;
}

.thumb img {
  object-fit: cover;
  object-position: right;
}

Precise positioning with percentages:

The first value is X, the second is Y. For example, 20% 30% moves the visible focus toward the left and slightly toward the top.

.thumb img {
  object-fit: cover;
  object-position: 20% 30%;
}

Precise positioning with length values:

.thumb img {
  object-fit: cover;
  object-position: 12px 8px;
}

1) Card image (center crop):

.card-img {
  width: 360px;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

2) Avatar (keep face higher):

.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

3) Product image (show full product): Prefer contain and center the content.

.product-img {
  width: 360px;
  height: 220px;
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
}

object-position controls where the image/video sits inside its box.
Most useful with object-fit: cover to control cropping focus.
Supports keywords (top/center/bottom/left/right), percentages, and length values.