CSS Object-Position Property

The CSS object-position property works together with object-fit to control which part of an <img> or <video> is visible inside its container.

It allows you to focus on important areas of an image or video, especially when object-fit: cover crops parts of the media.

Syntax

selector {
  object-position: x-axis y-axis;
}

Focus on the Center-Right Part

We want the main subject on the right to be visible when using object-fit: cover.

<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg alt="Object Position Example 1" class="position-right">
</div>

.image-container {
  width: 200px;
  height: 150px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.position-right {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Fill container while preserving aspect ratio */
  object-position: 80% 50%; /* Focus on right-middle part */
}

Focus on the Bottom-Left Part

We want the lower-left part of the image to remain visible when cropped.

<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg" alt="Object Position Example 2" class="position-bottom-left">
</div>

.position-bottom-left {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Preserves aspect ratio while filling container */
  object-position: 15% 100%; /* Focus on bottom-left */
}

Centering the Image

Sometimes you just want the center of the image to be visible, which is the default behavior.

<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg" alt="Object Position Center" class="position-center">
</div>

.position-center {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* Focuses on center */
}

Quick Reference Table

Property	Description
object-fit	Specifies how the media should fit inside its container.
object-position	Specifies which part of the media is visible inside the container using x/y coordinates.