Propriedade CSS object-fit
Use a propriedade CSS object-fit para definir como um elemento se ajusta ao seu contêiner. Veja os valores com exemplos.
A propriedade CSS object-fit controla como um elemento substituído — como um <img> ou <video> — é redimensionado para preencher sua caixa de conteúdo. É o equivalente de background-size para imagens e vídeos: em vez de esticar ou distorcer a mídia, você decide se ela deve preencher, caber, ser cortada ou permanecer intacta dentro da caixa definida.
Esta página explica o que object-fit faz, quando utilizá-lo, cada um de seus valores com exemplos executáveis e as propriedades relacionadas que refinam o resultado.
Por que usar object-fit
Quando você define uma width e height fixas em uma imagem cuja proporção difere da caixa, o navegador estica a imagem por padrão — rostos ficam achatados, logos ficam distorcidos. O object-fit resolve isso. Ele permite manter as dimensões da caixa (importante para layouts e grids previsíveis) enquanto instrui o navegador sobre como conciliar a proporção natural da imagem com essa caixa:
- Use
coverpara imagens hero, miniaturas e avatares — preenche a caixa, corta o excesso, nunca distorce. Este é o valor mais utilizado. - Use
containquando a imagem inteira deve permanecer visível (logos, fotos de produtos), mesmo que isso deixe espaço vazio. - Use
fill(o padrão) somente quando você realmente deseja que a imagem seja esticada para se ajustar exatamente à caixa.
Por padrão, a imagem é centralizada dentro da caixa. Para controlar qual parte é mantida ao cortar com cover, combine object-fit com object-position.
| Valor Inicial | fill |
|---|---|
| Aplica-se a | Elementos substituídos (<img>, <video>, <object>, etc.). |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.objectFit = "cover"; |
Sintaxe
Sintaxe CSS object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;Em todos os exemplos abaixo, a caixa tem 200px de largura e 400px de altura — uma caixa alta e estreita — enquanto a imagem de origem é paisagem. Essa incompatibilidade é o que torna o comportamento de cada valor visível.
Exemplo da propriedade object-fit com o valor "fill"
fill (o padrão) ignora a proporção e estica a imagem para corresponder exatamente à caixa, fazendo com que a árvore pareça achatada.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Resultado
A imagem é esticada para caber na caixa, distorcendo-a. O próximo valor, cover, corrige isso cortando em vez de esticar.
Exemplo da propriedade object-fit com o valor "cover"
cover redimensiona a imagem para preencher toda a caixa preservando sua proporção e, em seguida, corta o que ultrapassa. Nada é distorcido, mas as bordas podem ser cortadas. É a escolha ideal para miniaturas e banners hero.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemplo da propriedade object-fit com o valor "contain"
contain redimensiona a imagem para caber dentro da caixa preservando sua proporção, de modo que a imagem inteira permaneça visível. Como a caixa é mais alta do que a imagem é larga, isso deixa faixas vazias acima e abaixo dela (geralmente chamado de letterboxing).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemplo da propriedade object-fit com o valor "none"
none mantém a imagem em seu tamanho intrínseco (natural) e ignora completamente as dimensões da caixa. A imagem é centralizada e qualquer parte que exceda a caixa é cortada. Use quando for necessário preservar o tamanho original em pixels.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>None value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemplo da propriedade object-fit com o valor "scale-down"
scale-down compara none e contain e usa o que produz a imagem renderizada menor. Na prática, comporta-se como contain para imagens maiores que a caixa e como none para imagens menores — uma forma segura de reduzir mídias grandes sem ampliar imagens pequenas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| fill | Padrão. Estica o conteúdo para preencher exatamente a caixa de conteúdo, ignorando sua proporção (a imagem pode ser distorcida). |
| contain | Redimensiona o conteúdo para caber dentro da caixa preservando sua proporção; pode aparecer espaço vazio (letterboxing). |
| cover | Redimensiona o conteúdo para preencher a caixa preservando sua proporção; as bordas excedentes são cortadas. |
| none | Mantém o conteúdo em seu tamanho intrínseco, ignorando a caixa; centralizado e cortado se ultrapassar os limites. |
| scale-down | Renderiza o conteúdo como o menor entre none e contain — nunca amplia a imagem. |
| initial | Faz a propriedade usar seu valor padrão (fill). |
| inherit | Herda a propriedade do elemento pai. |
Suporte nos navegadores e dicas
object-fit é suportado em todos os navegadores modernos. Tenha em mente os seguintes pontos:
- Afeta apenas elementos substituídos (
<img>,<video>,<object>, SVG incorporado). Não funciona em um<div>— usebackground-sizenesses casos. - O elemento ainda ocupa a
width/heightque você definiu;object-fitapenas altera como o conteúdo é renderizado dentro dessa caixa. - Combine com
object-positionpara escolher qual parte da imagem permanece visível ao usarcoverounone. - Se o excesso cortado deve permanecer oculto, a caixa já o recorta; saiba mais em CSS overflow.