<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
img{
width: 250px;
height: 150px;
border: 1px solid #000;
}
#myFill img{
object-fit: fill;
}
#myContain img{
object-fit: contain;
}
#myCover img{
object-fit: cover;
}
#myNone img{
object-fit: none;
}
#myScaleDown img{
object-fit: scale-down;
}
</style>
</head>
<body>
<h1>CSS object-fit Property</h1>
<h2>object-fit: fill;</h2>
<div id="myFill">
<img src="devices.jpg">
</div>
<h2>object-fit: contain;</h2>
<div id="myContain">
<img src="devices.jpg">
</div>
<h2>object-fit: cover;</h2>
<div id="myCover">
<img src="devices.jpg">
</div>
<h2>object-fit: none;</h2>
<div id="myNone">
<img src="devices.jpg">
</div>
<h2>object-fit: scale-down;</h2>
<div id="myScaleDown">
<img src="devices.jpg">
</div>
</body>
</html>