Propriedade Object-position
Última atualização: 2026-09-13
object-position Propriedade Object-position
A propriedade object-position controla onde o conteúdo de um elemento substituído, como um <img> ou <video>, é mostrado dentro de seu contêiner. Quando o object-fit deixa espaço ou recorta o conteúdo, o object-position ajusta o foco de alinhamento para que as partes importantes permaneçam na área visível.
| Categoria | |
|---|---|
| Valor Inicial | 50% 50% |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
object-position: <position>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | <percentage> | Tipo | As coordenadas da posição do conteúdo |
left | center | right | top | bottom | Palavra-chave | Uma posição predefinida |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| object-position | ✓ v30 | ✓ v12 | ✓ v36 | ✓ v9 | ✓ v16 |
| Suportado em todos os principais navegadores | |||||
Dica： O object-position é geralmente combinado com object-fit: cover para manter o conteúdo importante (como a cabeça de uma pessoa) dentro do recorte.
Dica： Suporta palavras-chave (left, center, right, top, bottom) e valores concretos de comprimento ou porcentagem, semelhante a background-position.
❓ Perguntas Frequentes
QA propriedade object-position pode ser animada com transições do CSS?
ASim. O object-position é uma propriedade de comprimento/porcentagem, então suporta transition e animation — comumente usada para um deslocamento de foco no hover, como a imagem se movendo lentamente do centro para o canto superior esquerdo quando o mouse entra. Observe que animá-lo dispara repaint, então cuide do desempenho com imagens grandes; você pode combiná-lo com propriedades compostas como transform.
QA que se referem os valores de porcentagem do object-position no CSS?
AAs porcentagens são calculadas com base na diferença entre o tamanho do contêiner e o tamanho do conteúdo. 50% 50% é o alinhamento central padrão; 100% 100% alinha o canto inferior direito do conteúdo com o inferior direito do contêiner; 0% 50% alinha a borda esquerda do conteúdo com a borda esquerda do contêiner. Resumindo, quanto maior a porcentagem, mais o conteúdo se move nessa direção, e o excesso é recortado ou deixado como espaço.
QComo o object-fit: cover e o object-position funcionam juntos no CSS?
AO cover preenche o contêiner e recorta o excesso, e o object-position decide onde ocorre o recorte. Para um avatar que precisa manter o topo da cabeça, escreva object-fit: cover; object-position: top;. Em murais de imagens e imagens principais de e-commerce, alinhar o foco visual de cada imagem (rosto, sujeito do produto) a uma posição fixa parece muito mais profissional.
Qobject-position: center e object-position: 50% 50% são iguais?
AO efeito é idêntico: ambos centralizam o conteúdo horizontal e verticalmente. A sintaxe de posição corresponde a background-position, suportando as palavras-chave left, center, right, top e bottom, valores de comprimento e porcentagens, além de formas de deslocamento como right 10px top 20px. Use comprimentos ou porcentagens quando precisar de controle preciso.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
