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:
Valores
| 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. |
Exemplo
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;
}
:
Exemplo
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;
}
:
Exemplo
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;
}
:
Exemplo
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;
}
:
Veja também
-
a propriedade
aspect-ratio,
que define a proporção de aspecto do elemento