<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="img-con1">
<h3>object-fit: fill</h3>
<span>The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.
</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
<div class="img-con2">
<h3>object-fit: contain</h3>
<span>The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
<div class="img-con3">
<h3>object-fit: cover</h3>
<span>The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
<div class="img-con4">
<h3>object-fit: none</h3>
<span>The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.
</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
<div class="img-con5">
<h3>object-fit: scale-down</h3>
<span>The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
<div class="img-con6">
<h3>object-position: 20px 5px (default: 50% 50%)</h3>
<span>The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.</span>
<img src="https://unsplash.it/640/425?image=870">
</div>
</body>
</html>
// Code goes here
/* Styles go here */
img {
width: 90vw;
height: 75vh;
border: 3px solid tomato;
}
.img-con1 img{
object-fit: fill;
}
.img-con2 img{
object-fit: contain;
}
.img-con3 img{
object-fit: cover;
}
.img-con4 img{
object-fit: none;
}
.img-con5 img{
object-fit: scale-down;
}
.img-con6 img{
object-fit: fill;
object-position: 20px 5px;
}
/* Demo styles only */
* {
box-sizing: border-box;
}
body {
margin: 0;
}