CSS object-position
The object-position property is provided together with object-fit to specify how an image(img tag) or video should be positioned with x and y coordinates inside its “own content-box”.
Default value for object-position is 50% 50%, so, by default, all images are positioned in the center of their container.
CSS Syntax:
object-position: position|initial|inherit;
Property Values:
- position: the position of the image or video inside its content box. The first value controls the x-axis and the second value controls the y-axis. It can be a string (left, right or center) or can be a number (in % or px).
- initial: Property to its default value.
- inherit: Property from its parent element.
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= "train1.png"/>
</body>
</html>
OUTPUT:
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= "train1.png"/>
</body>
</html>
OUTPUT:
