object-fit no CSS

A propriedade object-fit define como imagens ou vídeos se ajustam dentro de uma área com largura e altura definidas.

Modelo Basico:

img{
width: 200px;
height: 300px;
object-fit: cover;
}

Valores principais:

object-fit: fill; → Estica para preencher. Pode deformar.

object-fit: contain; → Mostra a imagem inteira sem cortar. Pode sobrar espaço.

object-fit: cover; → Preenche toda a área sem deformar. Pode cortar partes.

object-fit: none; → Mantém tamanho original.

object-fit: scale-down; → Usa o menor entre none e contain.

---

object-fit: fill;

Faz a imagem preencher toda a área definida em largura e altura.

img{ 

width: 200px; 

height: 300px; 

object-fit: fill; 

}

→ A imagem ocupa todo o espaço.

→ Não deixa sobras vazias.

→ Pode esticar ou achatar a imagem.

Resultado:

Se a proporção original for diferente da área:

• imagem quadrada em área retangular
• pode ficar deformada.

Uso comum:

• Ícones simples
• Elementos decorativos
• Quando a distorção não importa
• Para fotos reais, geralmente cover ou contain ficam melhores.

Resumo fácil:

fill = “preenche tudo, mesmo deformando”.

---

object-fit: contain;

Faz a imagem caber inteira dentro da área definida, sem deformar.

img{ 

width: 200px; 

height: 300px; 

object-fit: contain; 

}

→  Mostra a imagem completa.

→  Mantém a proporção original.

→  Não estica nem achata.

→  Pode sobrar espaço vazio nas laterais ou em cima/baixo.

Resultado:

• imagem quadrada em área retangular
• aparecem bordas vazias para caber inteira.

Uso comum:

• Logos
• Produtos
• Imagens que não podem ser cortadas
• Miniaturas completas
• Se quiser preencher toda a área, cover costuma ser melhor.

Resumo fácil:

contain = “faz caber tudo, sem cortar”.

---

object-fit: cover; 

Faz a imagem preencher toda a área definida, sem deformar.

img{

  width: 200px;

  height: 300px;

  object-fit: cover;

}

→  A imagem ocupa todo o espaço.

→  Mantém a proporção original.

→  Não estica nem achata.

→  Pode cortar partes da imagem para preencher.

Resultado:

• imagem quadrada em área retangular
• a imagem amplia e corta bordas para caber totalmente.

Uso comum:

• Fotos de perfil
• Banners
• Cards com imagem
• Galerias modernas
• Se precisar mostrar a imagem inteira, contain é melhor.

Resumo fácil:

cover = “preenche tudo, mesmo cortando”.

---

object-fit: none

Mantém a imagem no tamanho original dentro da área definida.

img{ 

width: 200px; 

height: 300px; 

object-fit: none; 

}

→  A imagem não é redimensionada automaticamente.

→  Mantém seu tamanho natural.

→  Pode ultrapassar a área visível.

→  Partes da imagem podem ficar cortadas.

Resultado:

• imagem maior que o espaço
• só parte dela aparece.
• imagem menor que o espaço
• sobra espaço vazio.

Uso comum:

• Mostrar imagem no tamanho real
• Recortes manuais com `object-position`
• Efeitos específicos de layout
• Não adapta a imagem ao container.

Resumo fácil:

`none` = “fica no tamanho original”.

---

object-fit: scale-down;

Compara dois comportamentos:

none

contain

E usa o que deixar a imagem menor dentro da área.

Como funciona:

→  Se a imagem original já cabe no espaço: usa none

(permanece tamanho natural)

→  Se a imagem é grande demais: usa contain

(reduz para caber inteira)

Exemplo:

img{ 

width: 200px; 

height: 200px; 

object-fit: scale-down; 

}

Resultado:

Imagem pequena → fica normal

Imagem grande → diminui para caber

Resumo fácil:

scale-down = “só diminui se precisar”.

Muito útil quando você não quer ampliar imagens pequenas nem cortar imagens grandes.