The object-fit property

The object-fit property specifies an aspect ratio or scaling of elements such as an image or video.

Syntax

selector {
	object-fit: fill or contain or cover or none;
}

The table shows the main values for the object-fit property:

Value	Description
`fill`	Scales an element to fit the specified dimensions, ignoring the element's proportions.
`contain`	Scales an element to fit specified dimensions while maintaining the element's proportions.
`cover`	The element's dimensions are changed to completely fill the specified area, while the proportions of an element itself are maintained.
`none`	The original dimensions of an element are preserved.

Let's fill our image with the specified size without preserving the proportions:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: fill;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Now let's make the image fill the specified container while maintaining the proportions:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: contain;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Let's fill the specified container with our image so that the size of the image itself changes, but its proportions are preserved:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: cover;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}

Let's just place our image in the specified container while maintaining its original dimensions:

<div>
	<img src="bg.png">
</div>

img {
	object-fit: none;
	height: 400px;
	width: 300px;
	border: 1px solid black;
}