<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
img{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: #fff;
margin-right: 1em;
object-fit: none;
}
#point{
object-position: left bottom;
}
#point1{
object-position: 50% 50%;
}
#point2{
object-position: right top;
}
#point3{
object-position: 250px 150px;
}
</style>
</head>
<body>
<h1>CSS object-position Property</h1>
<h2>object-position: left bottom;</h2>
<img id="point" src="apple.png">
<h2>object-position: 50% 50%;</h2>
<img id="point1" src="apple.png">
<h2>object-position: right top;</h2>
<img id="point2" src="apple.png">
<h2>object-position: 250px 150px;</h2>
<img id="point3" src="apple.png">
<p><strong>Note</strong>: Last image goes out of visibility</p> </body>
</html>