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.

---

The Image

Look at the following image from Paris, which is 400x300 pixels:

---

object-fit: cover; ensures the image fills the entire allocated space while preserving its original proportions. To achieve this, the image is scaled up or down as needed, and if the image's aspect ratio doesn't perfectly match the container's, it will be cropped to fit.

---

Output->

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.

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

Output :

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

Output->