This CSS property is used to specify the alignment of the content within the container. It is used with the object-fit property to describe how an element like <video> or <img> is positioned with x/y coordinates within its container.
When employing the object-fit property, the default setting for object-position is 50% 50%, which means images are automatically centered within their container. To adjust the default alignment, object-position property can be utilized.
Syntax
object-position: <position> | inherit | initial;
Values
It specifies the placement of the video or image inside the designated area. This property requires two numeric inputs (e.g., 0 10px), where the initial value dictates the horizontal positioning and the subsequent value governs the vertical alignment. The position can be expressed as a text string (such as left, right, or center) or as a numerical value (in pixels or percentage). Negative figures are also permissible. By default, it is set to 50% for both horizontal and vertical axes. Additionally, alternative string descriptors like right top, left bottom, and others can be utilized.
It assigns the attribute to its default value.
The property is passed down from its parent element through the process of inheritance.
Now, let's explore a few instances that will demonstrate the object-position attribute.
Example
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 400px;
border: 5px solid red;
background-color: lightblue;
object-fit: none;
object-position: 90px 200px;
}
</style>
</head>
<body>
<h2> object-position: 90px 200px </h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
After running the code, the resulting output will be displayed as depicted in the image provided below.
Example- using "center top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid red;
background-color: lightblue;
object-fit: none;
object-position: center top;
}
</style>
</head>
<body>
<h2>object-position: center top</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
Example- using "right top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid red;
background-color: lightblue;
object-fit: none;
object-position: center top;
}
</style>
</head>
<body>
<h2>object-position: center top</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
Example- using "left top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid red;
background-color: lightblue;
object-fit: none;
object-position: left top;
}
</style>
</head>
<body>
<h2>object-position: left top</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output
Example- using "initial"
By utilizing the initial value, the image will be centered. This occurs because the initial value resets the property to its default value, specifically 50% 50%.
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 400px;
border: 5px solid red;
background-color: lightblue;
object-fit: none;
object-position: initial;
}
</style>
</head>
<body>
<h2> object-position: initial</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"/>
</body>
</html>
Output