CSS object-position

CSS object-position Property

The CSS object-position property is used together with the object-fit property to specify how an or

The first value controls the x-axis and the second value controls the y-axis. The value can be a string (left, center or right), or a number (in px or %). Negative values are also allowed.

Using the object-position Property

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

Here we position the image so that the great old building is in center:

Example

  .image-container {
  width: 200px;
  height: 300px;

  border: 1px solid black;
}

.image-container img {
  width: 100%;

  height: 100%;
  object-fit: cover;
  object-position: 80%
  100%;
}

Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:

Example

  .image-container {
  width: 200px;
  height: 300px;

  border: 1px solid black;
}

.image-container img {
  width: 100%;

  height: 100%;
  object-fit: cover;
  object-position: 15%
  100%;
}

CSS Object-* Properties

The following table lists the CSS object-* properties:

Property	Description
object-fit	Specifies how an or
object-position	Specifies how an or