<!DOCTYPE html>
<html>
<head>
<title>CSS Object Fit</title>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>
<h2>Original Image</h2>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="Paris">
<h2>object-fit: fill (this is default):</h2>
<img class="fill" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="studytonight" style="width:200px;height:400px">
<h2>object-fit: contain:</h2>
<img class="contain" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="studytonight" style="width:200px;height:400px">
<h2>object-fit: cover:</h2>
<img class="cover" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="studytonight" style="width:200px;height:400px">
<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="studytonight" style="width:200px;height:400px">
<h2>object-fit: none:</h2>
<img class="none" src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1610689740-79539.png" alt="studytonight" style="width:200px;height:400px">
</body>
</html>