A propriedade object-fit

A propriedade object-fit define a proporção de aspecto ou o dimensionamento de elementos como imagem ou vídeo.

Sintaxe

seletor {
	object-fit: fill ou contain ou cover ou none;
}

A tabela apresenta os valores principais para a propriedade object-fit:

Valor	Descrição
`fill`	Dimensiona o elemento para corresponder às dimensões especificadas, ignorando as proporções do elemento.
`contain`	Dimensiona o elemento para corresponder às dimensões especificadas, mantendo as proporções do elemento.
`cover`	As dimensões do elemento são alteradas para preencher completamente a área especificada, mantendo as proporções do próprio elemento.
`none`	As dimensões originais do elemento são mantidas.

Vamos definir para nossa imagem um preenchimento do tamanho especificado sem manter as proporções:

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

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

E agora vamos fazer com que a imagem preencha o contêiner especificado mantendo as proporções:

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

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

Vamos preencher com nossa imagem o contêiner especificado de modo que o tamanho da própria imagem seja alterado, mas mantendo suas proporções:

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

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

Vamos simplesmente colocar nossa imagem no contêiner especificado mantendo seu tamanho original:

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

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