Object-fit em CSS
Float envolvia texto ao lado da mídia. object-fit responde outra pergunta sobre mídia: quando um img ou video fica num quadro de tamanho fixo, como o conteúdo deve preencher esse quadro? Domine cover e contain antes de esticar rostos com fill.
Um kit de ferramentas object-fit
📊 Object-fit em um olhar
| Valor | Tarefa do dia a dia |
|---|---|
fill |
Esticar até a caixa — pode distorcer a proporção |
contain |
Encaixar a mídia inteira; podem sobrar faixas vazias |
cover |
Preencher a caixa; pode cortar bordas |
none |
Manter o tamanho intrínseco; pode extravasar ou deixar vãos |
scale-down |
Como none ou contain — o que for menor |
object-position |
Mira qual parte permanece visível ao cortar ou encaixar |
object-fit só brilha quando o elemento substituído tem largura e altura definidas (ou ambos os eixos limitados). Uma imagem livre com altura auto não tem quadro no qual «encaixar».
Cover — preencha o quadro, permita corte
Cartões e thumbs de hero costumam querer cada pixel da caixa preenchido. cover amplia e corta o extravasamento. Pareie uma caixa quadrada com cover para grades limpas.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — mostre a imagem inteira
Fotos de produto e diagramas muitas vezes precisam ficar totalmente visíveis. contain deixa faixas (letterbox) se as proporções diferem — melhor uma faixa do que um logo cortado.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill estica — use com cuidado
fill força a mídia ao tamanho da caixa mesmo se as proporções deformarem. Serve para texturas abstratas; arriscado para rostos, logos e gráficos.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position mira o corte
Quando cover corta, o centro padrão pode esconder um rosto ou logo. Ajuste com object-position — porcentagens ou palavras-chave como top e left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Um hábito calmo de object-fit
Use <img> / <video> reais com object-fit para mídia com significado. Use background-size quando a imagem for só chrome CSS decorativo. Dimensionize a caixa primeiro, escolha cover ou contain, depois afine a posição.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Experimente você mesmo
- Dê a uma imagem largura e altura fixas e teste
covervscontain. - Monte um avatar circular com
covere desloqueobject-position. - Aplique
filluma vez e note a distorção — depois volte. - Compare o mesmo corte como decoração
background-size: cover. - Escreva uma frase: quando contain é mais seguro que cover?
Erros comuns
- Esperar que
object-fitfuncione sem caixa dimensionada - Usar
fillem retratos e logos - Confundir esta lição com wrap de float ou offsets de position
- Colocar fotos significativas só em
background-image(alt mais difícil) - Esquecer
object-positionquando cover esconde o assunto
Resumo
object-fitencaixa mídia substituída num quadro dimensionadocoverpreenche e pode cortar;containmostra tudo e pode deixar faixasfillpode distorcer — use com parcimôniaobject-positionmira a região visível- Prefira object-fit para mídia de conteúdo; background-size para decoração
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo