CSS object-position Property

CSS object-position property is used to specify the position of <img> or <video> within its container.

image

Let's take a look at the image from Wuhan below, with a size of 600x400 pixels:

Next, we use object-fit: cover; to maintain the aspect ratio and fill the given size. However, the image will be cropped to fit, as shown below:

Example

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
}

Try It Yourself

using the object-position property

Suppose the part of the image displayed is not the position we want. To position the image, we will use object-position property.

Here, we will use object-position property to position the image, so that the ancient building is centered:

Example

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 50% 100%;
}

Try It Yourself

Here, we will use object-position Use properties to position the image, so that the famous corner tower of the Forbidden City is located on the right:

Example

img {
  width: 266px;
  height: 400px;
  object-fit: cover;
  object-position: 25% 100%;
}

Try It Yourself

CSS object-* Properties

The following table lists CSS object-* properties: