CSS propriedade object-position

Definição e uso

A propriedade object-position, quando usada com object-fit, define como os coordenadas x/y devem ser usadas para localizar <img> ou <video> dentro de sua "própria caixa de conteúdo".

Veja também:

Tutorial do CSS:object-fit do CSS

Manual de referência do CSS:object-position do CSS

Manual de referência do HTML DOM:Propriedade objectPosition

Exemplo

Ajuste o tamanho da imagem para se ajustar à sua caixa de conteúdo e mova a imagem dentro da caixa de conteúdo 5px para a esquerda e 10% para cima:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px sólido vermelho;
}

Experimente você mesmo

Sintaxe do CSS

object-position: position|initial|inherit;

Valor da propriedade

Valor Descrição
position

Define a posição da imagem ou do vídeo dentro de sua caixa de conteúdo.

O primeiro valor controla o eixo x, o segundo valor controla o eixo y.

Pode ser uma string (esquerda, centro ou direita) ou um número (em px ou %). Valores negativos são permitidos.
initial Defina essa propriedade como seu valor padrão. Veja: initial.
inherit Herda essa propriedade do elemento pai. Veja: inherit.

Detalhes técnicos

Valor padrão: 50% 50%
Herança: sim
Produção de animação: Suportado. Veja:Propriedades relacionadas a animação.
Versão: CSS3
Sintaxe do JavaScript: object.style.objectPosition="0 10%"

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0