Propriedade Object-fit
Última atualização: 2026-09-13
object-fit Propriedade Object-fit
A propriedade object-fit controla como o conteúdo de um elemento substituído, como um <img> ou <video>, cabe em sua largura e altura especificadas. Quando a proporção do elemento difere do conteúdo, o object-fit decide se estica, recorta mantendo a proporção ou mostra tudo — uma ferramenta indispensável para layouts de imagens responsivos.
| Categoria | |
|---|---|
| Valor Inicial | fill |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
object-fit: fill | contain | cover | none | scale-down;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
fill | contain | cover | none | scale-down | Palavra-chave | Como o conteúdo do elemento substituído é ajustado |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-fit | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| Suportado em todos os principais navegadores | |||||
Dica： O cover é o valor mais comum: mantém a proporção da imagem e preenche o contêiner, recortando o excesso — ideal para miniaturas quadradas.
Dica： O object-fit precisa de uma largura e altura explícitas no elemento para surtir efeito; definir apenas a largura ou apenas a altura não dispara o comportamento de ajuste.
❓ Perguntas Frequentes
QQual é a diferença entre object-fit e background-size?
AO object-fit aplica-se a elementos substituídos como img e video, controlando como o conteúdo cabe na caixa do elemento. A imagem permanece no fluxo do documento e continua visível para SEO, texto alt e rastreadores. O background-size aplica-se a imagens de fundo e convém para conteúdo puramente decorativo. Use img com object-fit para imagens de conteúdo e background com background-size para decoração.
QQual é a diferença entre scale-down e contain no object-fit?
AO contain dimensiona a imagem proporcionalmente para caber completamente no contêiner; quando a imagem é menor que o contêiner, ela é ampliada para preenchê-lo (proporção preservada). O scale-down escolhe o menor entre none (tamanho natural) e contain, então imagens pequenas nunca são ampliadas. Use scale-down para imagens pequenas a fim de evitar o desfoque; para imagens grandes, ambos geralmente dão o mesmo resultado.
QPor que o object-fit: cover recorta minha imagem? Como mantenho a parte importante?
AO cover preserva a proporção e preenche o contêiner, então sempre que as proporções diferem ele precisa recortar o excesso — por padrão mantém a região central. Para preservar o conteúdo importante (um rosto, um logotipo), mova o foco do recorte com object-position, por exemplo, object-position: top mantém o topo. Você também pode usar aspect-ratio para que o contêiner corresponda à imagem e evitar o recorte por completo.
QPor que a propriedade object-fit não funciona no meu elemento de imagem?
AA causa mais comum é o elemento não ter largura e altura definidas: quando apenas uma dimensão é definida e a outra é auto, um elemento substituído escala pela própria proporção e o object-fit não tem o que ajustar. Confirme também que é um elemento substituído (<img>, <video>, <iframe>, <embed>) — o conteúdo em uma div comum não é controlado pelo object-fit. Verificar esses dois pontos geralmente resolve.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
