Propriedade CSS object-position
Use a propriedade CSS object-position para definir a posição do elemento dentro do seu contêiner. Veja os valores e experimente exemplos.
A propriedade CSS object-position define como um elemento substituído — como um <img> ou <video> — é posicionado dentro de sua própria caixa. Um elemento substituído é aquele cujo conteúdo provém de uma fonte externa e não do CSS, portanto o navegador decide como encaixar esse conteúdo no espaço que a caixa oferece.
Por si só, object-position não produz nenhum efeito visível a menos que o tamanho intrínseco do elemento difira do tamanho da caixa. Essa diferença é criada pela propriedade object-fit: quando object-fit redimensiona ou recorta o conteúdo (por exemplo, com cover ou contain), object-position decide qual parte do conteúdo permanece visível. Pense na caixa como uma janela e na imagem como uma foto maior atrás dela — object-position desliza a foto para que uma região diferente apareça.
O valor é escrito como uma ou duas coordenadas: a primeira controla o eixo x (horizontal) e a segunda o eixo y (vertical). Se você fornecer apenas um valor, o segundo assume o padrão center.
/* keyword pairs */
object-position: left top;
object-position: right bottom;
/* lengths and percentages */
object-position: 10px 20%;
object-position: 50% 50%; /* the default — centered */Cada coordenada pode ser uma palavra-chave (left, right, top, bottom, center), um comprimento (px, em, …) ou uma porcentagem. Uma porcentagem de 0% alinha aquela borda do conteúdo com a mesma borda da caixa; 100% alinha as bordas opostas.
Valores negativos são válidos — object-position: -20px 0; empurra o conteúdo para além da borda esquerda da caixa, ocultando aquela faixa.
| Valor Inicial | 50% 50% |
|---|---|
| Aplica-se a | Elementos substituídos. |
| Herdado | Não. |
| Animável | Sim. A imagem é animável. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.objectPosition = "20% 0%"; |
Sintaxe
object-position: <position> | initial | inherit;Exemplos
Exemplo com a posição padrão (50% 50%)
O valor padrão centraliza o conteúdo. Como object-fit: cover recorta a imagem para preencher a caixa, a centralização mantém a parte do meio da foto visível.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 50% 50%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 50% 50%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Resultado
Exemplo com a palavra-chave left
Com left, o eixo horizontal se alinha à borda esquerda da caixa (e o eixo vertical assume o padrão center), mantendo o lado esquerdo da imagem recortada visível.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: left;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: left</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Exemplo com comprimento e porcentagem (10px 20%)
É possível combinar unidades entre os dois eixos. Aqui o conteúdo é deslocado 10px a partir da esquerda e posicionado 20% abaixo da caixa.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
border: 2px solid #8ebf42;
object-fit: cover;
object-position: 10px 20%;
}
</style>
</head>
<body>
<h2>Object-position property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Object-position: 10px 20%</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valores
| Valor | Descrição |
|---|---|
<position> | Especifica a posição do elemento substituído dentro de sua caixa. Pode ser uma palavra-chave (top, bottom, left, right, center) ou uma combinação de palavras-chave, porcentagens ou comprimentos. |
initial | Define a propriedade com seu valor padrão. |
inherit | Herda a propriedade do elemento pai. |
Quando usar
object-position é mais útil para o recorte responsivo de imagens. Quando uma foto precisa preencher um contêiner de tamanho fixo (a miniatura de um cartão, um banner principal, um avatar) com object-fit: cover, o navegador recorta o que não couber. Por padrão, ele recorta uniformemente a partir do centro, o que pode cortar a parte importante de uma foto — o rosto de uma pessoa próxima ao topo, por exemplo. Definir object-position: center top mantém essa região visível.
Algumas coisas que vale lembrar:
- Afeta apenas elementos substituídos (
<img>,<video>,<input type="image">, às vezes<object>). Não tem efeito em uma<div>. - É usada em conjunto com object-fit:
object-fitdecide como o conteúdo é dimensionado ou recortado, eobject-positiondecide onde a janela visível se posiciona. - A sintaxe espelha a propriedade background-position, portanto as mesmas regras de palavras-chave e porcentagens se aplicam.