Updated May 17, 2023
Introduction to CSS object-position
The CSS object-position property stipulates alignment of the contents of the selected replaced element within the box of the element. The object-position property can be used in accordance with the object-fit property and describes how X / Y coordinates an element, such as a video or image, within its content box. The object-position property works close to how the preserveAspectRatio< align > parameter works in SVG. The object-position property is used to define the size and position of the external media embedded into HTML, mainly the images inside the <img> tag as well as the content of the < video >, < iframe >, or < embed > elements.
Syntax:
The syntax for CSS object-position property can be defined as shown below:
object-position: position|initial|inherit;- position: This parameter stipulates the image or video position inside its box of contents. The first value controls the x-axis, and the second value controls the y-axis. It may be a string (left, center, or right) or a number (in px or percent). Negative values are approved.
- initial: This parameter helps to set its default value to that property.
- inherit: This parameter is inherited from its parent element.
For instance,
object-position: 50% 50%;
It defines the image in the middle of the content box.
How CSS object-position Property work?
- The specification method of how an object (image or video) must fit within its box. The object-fit options involve “contain” (fit by aspect ratio), “fill” (fill object stretches), and “cover” (overflow box but keep ratio), where object-position allows the object to be repositioned as the background image can do.
- The object-fit and object position are two important CSS properties that give developers control over the content inside an image or a video element. The object-position property helps you place your element in HTML.
- Any HTML feature can be placed at any location you want. You may decide whether you want the item on the page to be placed relative to its natural position or the absolute, depending on its parent.
Examples of CSS object-position
Given below are the examples mentioned:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS object-position Example </title>
<style>
img {
width: 250px;
height: 300px;
background-color: grey;
object-fit: none;
object-position: 15px 35px;
}
</style>
</head>
<body>
<h2> Object Position Example </h2><br>
<img id="object" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
</body>
</html>Output:
The object-fit property, which describes how the image should be resized to fit its container, and the object-position property, which specifies how the image should be positioned with respect to x and y coordinates in the content box, have all been assigned to the img tag in the example above. In the code, we have set the object position to ’15px’ for most of the box from the left and ’35px’ for most of the boxes from the top.
Example #2
For example, where object-position will be set to 75% 100%.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS object-position Example </title>
<style>
img {
width: 250px;
height: 300px;
background-color: grey;
object-fit: none;
object-position: 75% 100%;
}
</style>
</head>
<body>
<h2> Object Position Example </h2><br>
<img id="object" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
</body>
</html>Output:
In the example above, we have set the object position to 75%, which is from the left side of the box and 100%will be from the top of the box. The code again uses object-fit and object-position properties as described in the above example.
Example #3
Now we will create an example that displays the image at the left side of the bottom in the content box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS object-position Example </title>
<style>
img {
width: 250px;
height: 300px;
background-color: grey;
object-fit: none;
object-position: left bottom;
}
</style>
</head>
<body>
<h2> Object Position Example </h2><br>
<img id="object" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
</body>
</html>Output:
In the example above, we have set the object position to the left side of the bottom. i.e. image will get displayed at ‘left’ most of the box from the left side, at the bottom of the box.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS object-position Example </title>
<style>
img {
width: 250px;
height: 300px;
background-color: grey;
object-fit: none;
object-position: initial;
}
</style>
</head>
<body>
<h2> Object Position Example </h2><br>
<img id="object" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
</body>
</html>Output:
In the above mentioned example, the element was set to 50% and 50% using the initial property. i.e., by default, the picture will be centered in the content box. The initial keyword adds a new element with the property’s initial value. Any CSS property that has it enabled will cause the element to use the specified property’s default value.
Example #5
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS object-position Example </title>
<style>
img {
width: 250px;
height: 300px;
background-color: grey;
object-fit: none;
object-position: inherit;
}
#img_obj{
object-position: 15px;
}
#img_obj1{
object-position: 80% 10%;
}
</style>
</head>
<body>
<h2> Object Position Example </h2><br>
<img id="img_obj" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
<img id="img_obj1" src=
"https://media-exp1.licdn.com/dms/image/C4E0BAQG1578pP8Uvpg/company-logo_200_200/0?e=2159024400&v=beta&t=YN5_sse_NcqIhGzgShohlvBokFuuQ8oXpLNct9bLNA4" />
</body>
</html>Output:
The left edge of the first image is 15 pixels away from the left edge of the element’s box. The second picture is 10% down the height of the element’s box, flush with the right edge, and positioned against the right edge of the element’s box. The ‘inherit’ property, which gets the property from the parent element, has been used in this example. The content box is set using the element with the id ‘#img_obj1’.
Recommended Articles
We hope that this EDUCBA information on “CSS object-position” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
