Posição do objeto - CSS-Tricks

A object-positionpropriedade é usada em conjunto com a object-fitpropriedade e define como um elemento, como um vídeo ou imagem, é posicionado com as coordenadas X / Y dentro de sua caixa de conteúdo. Essa propriedade aceita dois valores numéricos, como 0 10%ou 0 10px. Nesses exemplos, o primeiro número indica que a imagem deve ser colocada à esquerda da caixa de conteúdo (0), o segundo que deve ser posicionada a 10% ou 10px do topo. Também é possível usar valores negativos.

O valor padrão para object-positioné 50% 50%ao usar a object-fitpropriedade em uma imagem, para que por padrão todas as imagens sejam posicionadas no centro de sua caixa de conteúdo, assim:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Demo

Abaixo estão alguns exemplos de como podemos manipular o object-positionde uma imagem com a object-fitpropriedade definida como none. Se o conteúdo da imagem não preencher a caixa de conteúdo por algum motivo, o espaço não preenchido mostrará o fundo do elemento, que pode ser uma cor ou mesmo um background-image, como no último exemplo:

Veja a posição do Pen Object de Robin Rendle (@robinrendle) no CodePen.