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 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:
In the example above, CSS styles have been assigned to img tag along with object-fit property that specify how image should be resized to fit its container and object-position property that specifies how image should be positioned with x or y coordinates in the content box. In the code, we have set the object-position to ’15px’ most of the box from the left, and ’35px’ most of the box from the top.
Example #2
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 which displays the image at 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 left side of the bottom. i.e. image will get display 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 example, initial property has been used which sets the element in 50% 50%. i.e. by default, image will be placed in the middle of the content box.The initial keyword adds an element with the initial value of a property. It is enabled on any CSS property and makes the element to use the initial value of the property for which it is defined.
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 first image is placed from the left edge of the box of the element, with its left edge inset 15 pixels. The second image is placed against the right edge of the element’s box with its right edge flush and is located 10 percent down the box ‘s height. In the above example, inherit property has been used which uses the property from the parent element. It uses id ‘#img_obj1’ to set the element in the content box.
Conclusion
So far, we have seen how the object-position property is used along with different scenarios. As object-position and object-fit properties may prove much more useful, it depends on the browsers you support whether you can actually use them in the real world. Object-fit is supported in all major browsers except IE / Edge and in all major browsers except IE / Edge and Safari object-position is supported. The object-fit and object-position can be interpreted as background-size and background-position parallel to the image properties. Only for elements that are inserted directly into HTML are these intended.
Recommended Articles
This is a guide to CSS object-position. Here we discuss how CSS object-position property work with programming examples for better understanding. You may also have a look at the following articles to learn more –
