Propriedade objectFit do estilo

Definição e uso

objectFit A propriedade é usada para definir como o tamanho de <img> ou <video> deve ser ajustado para se ajustar ao contêiner.

Essa propriedade informa como o conteúdo deve ser preenchido no contêiner de várias maneiras; por exemplo, "manter a proporção de altura e largura" ou "estender e ocupar o maior espaço possível".

Veja também:

Tutorial do CSS:CSS object-fit

Manual de referência do CSS:A propriedade object-fit

Exemplo

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

document.getElementById("myImg").style.objectFit = "cover";

Experimente você mesmo

Sintaxe

Retorne a propriedade objectFit:

object.style.objectFit

Defina a propriedade objectFit:

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Valor da propriedade

Valor Descrição
fill Padrão. Ajuste o tamanho do conteúdo substituído para preencher a caixa de conteúdo do elemento. Se necessário, o objeto será esticado ou comprimido.
contain Ajuste o conteúdo substituído para manter a proporção da largura e da altura, ao mesmo tempo em que se adapta à caixa de conteúdo do elemento.
cover Ajuste o tamanho do conteúdo substituído para manter a proporção da largura e da altura ao preencher a caixa de conteúdo do elemento inteiro. 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 qual dos dois obterá o tamanho do objeto menor.
initial Defina essa propriedade para seu valor padrão. Veja initial.
inherit Herda essa propriedade do elemento pai. Veja inherit.

Detalhes técnicos

Valor padrão: fill
Retorno: Uma string que representa o tamanho do elemento A propriedade object-fit.
Versão do CSS: CSS3

Suporte do navegador

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

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