CSS object-position property
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 using the object-fit property, the default value for object-position is 50% 50%, so, by default, all images are positioned in the center of their container. We can change the default alignment by using the object-position property.
position: It defines the position of the video or the image within the container. It takes two numerical values (such as 0 10px) in which the first value manages the x-axis, whereas the second value controls the y-axis. It can be a string (left, right or center) or can be number (in % or px). It allows negative values. Its default value is 50% 50%. We can use string values like the right top, left bottom, etc.
initial: It sets the property to the default value.
inherit: It inherits the property from its parent element.
Now, lets' see some examples that will illustrate the object-position property.
ExampleTest it Now
After the execution of the program, we will get the output as shown in the below image.
Example- using "center top"Test it Now
Example- using "right top"Test it Now
Example- using "left top"Test it Now
Example- using "initial"
When we use the initial value, then the image will be positioned to the center. It is because the initial sets the property to its default value, which is 50% 50%.Test it Now