Object fit:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object fit Property</title>
</head>
<style>
.container{
background-color: antiquewhite;
width: 488px;
height: 500px;
border: 2px solid black;
background-image:url("https://images.unsplash.com/photo-1700730025710-58ff304c1c8b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") ;
/* background-position: center center; */
/* background-position: top right; */
object-fit: cover;
background-repeat: no-repeat;
}
img{
width: 488px;
height: 500px;
/* imager ki height ko cover kar lenga is property se ... isse thod image bhi cut sakti hai */
/* object-fit: cover; */
/* ontaine means puri image ko dikhata hai isse */
/* object-fit: contain; */
object-fit: contain;
/* isse ye position dikhenga */
object-position: top right;
}
</style>
<body>
<div class="container">
<!-- <img src="https://images.unsplash.com/photo-1700730025710-58ff304c1c8b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt=""> -->
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.