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

cssseletor {
  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:

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

cssimg {
  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:

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

cssimg {
  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:

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

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

Результат:

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

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

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

Результат: