CSS Object-Position

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Object Position Property

The CSS object-position property defines how an <img> or <video> must be positioned within its container.

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

Output

Using object-fit: cover

Paris

Using the object-position Property

Let’s suppose a part of the image that is displayed, is not positioned as per requirement. To set the image, the object-position property is used.

The object-position property  is used to position the image so that the great old building is in center.

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

Output

Using object-position

Here we will use the object-position property to position the image so that the great old building is in center:

Paris