CSS object-position Property
Paired with the object-fit property, the CSS object-position property uses x/y coordinates to place an <img> or <video> inside its container.
It takes two values: the x-axis comes first and the y-axis comes second. Strings (left, center or right) and numbers (in px or %) are both accepted, and negative values work too.
Using the object-position Property
Sometimes the visible part of an image is not the one you were hoping for. Changing object-position brings the part you actually want into view.
Position building in center
With object-position: 80% 100%, the great old building ends up in the center of the image.
Prompt
Create a page with a 200x300px container with a 1px solid black border. Place an image inside it using object-fit: cover and object-position: 80% 100% to focus on a specific part of the image. Use any wide landscape image URL.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Building Center</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Position Eiffel Tower in center
With object-position: 15% 100%, the Eiffel Tower ends up in the center of the image.
Prompt
Create a page with a 200x300px container with a 1px solid black border. Place an image inside it using object-fit: cover and object-position: 15% 100% to focus on a different part of the image. Use any wide landscape image URL.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Position - Eiffel Tower</title>
<style>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15% 100%;
}
</style>
</head>
<body>
<h2>Using object-position</h2>
<div class="image-container">
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>