CSS propriedade object-fit

Definição e uso

A propriedade objectFit é usada para determinar como ajustar o tamanho de <img> ou <video> para se adaptar ao seu contêiner.

Essa propriedade informa como o conteúdo deve preencher o contêiner. Por exemplo, 'manter a proporção de largura e altura' ou 'expandir e ocupar o máximo de espaço possível'.

Veja também:

Tutorial CSS:CSS object-fit

Manual de referência CSS:CSS object-position

Manual de referência do HTML DOM:Propriedade objectFit

Exemplo

Recorte os lados da imagem, mantendo a proporção de largura e altura, e preencha o espaço:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Experimente você mesmo

Sintaxe CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Valor da propriedade

Valor Descrição
fill Valor padrão. Ajuste o tamanho do conteúdo substituído para preencher o content box do elemento. Se necessário, o objeto será esticado ou comprimido.
contain Ajuste o tamanho do conteúdo substituído para manter a proporção de largura e altura, ajustando-o para caber no content box do elemento.
cover Ajuste o tamanho do conteúdo substituído para manter a proporção de largura e altura ao preencher todo o content box do elemento. O objeto será cortado.
none O conteúdo substituído não será ajustado no tamanho.
scale-down O tamanho do conteúdo é o mesmo que none ou contain, dependendo de quem obterá o tamanho do objeto menor entre os dois.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: Veja propriedades individuais.
Herança: Não
Produção de animação: Não suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe JavaScript: object.style.objectFit="cover"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0