CSS The object-position Property

The CSS object-position property is used to specify how an <img> or <video> should be positioned within its container.

Example

img {
width: 200px;
height: 300px;
object-fit: cover;
}

Using the object-position Property

Let’s say that the part of the image that is shown, is not positioned as we want. To position the image, we will use the object-position property.

Example

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 15% 100%;
}