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 400×300 pixels:
Next, we use object-fit: cover; to keep the aspect ratio and to fill the given dimension. However, the image will be clipped to fit, like this:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Result:
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:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<p>Here we will use the object-position property to position the image so that the great old building is in center:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Result:
Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 15% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<p>Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
Result:
