In this article, you will learn How to create an object-fit property using CSS.

Example:-

<html>
<head>
<title>Object fit property</title>
<style>
.fill{
object-fit: fill;
}
.contain{
object-fit: contain;
}
.cover{
object-fit: cover;
}
.scale-down{
object-fit: scale-down;
}
.none{
object-fit: none;
}
h1,h2{
text-align:center;
}
</style>
</head>
<body>
<h1>object-fit Property</h1>
<h2>No object-fit:</h2>
<img src="image.jpg" alt="image" style="width:200px;height:400px">
<h2>object-fit:fill (this is the default):</h2>
<img class="fill" src="image.jpg" alt="image" style="width:200px;height:400px">
<h2>object-fit:contain:</h2>
<img class="contain" src="image.jpg" alt="image" style="width:200px;height:400px">
<h2>object-fit:cover:</h2>
<img class="cover" src="image.jpg" alt="image" style="width:200px;height:400px">
<h2>object-fit:scale-down:</h2>
<img class="scale-down" src="image.jpg" alt="image" style="width:200px;height:400px">
<h2>object-fit:none:</h2>
<img class="none" src="image.jpg" alt="image" style="width:200px;height:400px">
</body>
</html>

Read on Facebook