Posición del objeto - Trucos CSS

La object-positionpropiedad se usa junto con la object-fitpropiedad y define cómo se coloca un elemento, como un video o una imagen, con las coordenadas X / Y dentro de su cuadro de contenido. Esta propiedad toma dos valores numéricos, como 0 10%o 0 10px. En esos ejemplos, el primer número indica que la imagen debe colocarse a la izquierda del cuadro de contenido (0), el segundo que debe colocarse al 10% o 10px de la parte superior. También es posible utilizar valores negativos.

El valor predeterminado para object-positiones 50% 50%cuando se usa la object-fitpropiedad en una imagen, de modo que, de manera predeterminada, todas las imágenes se colocan en el centro de su cuadro de contenido, así:

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

Manifestación

A continuación se muestran algunos ejemplos de cómo podemos manipular el object-positionde una imagen con la object-fitpropiedad establecida en none. Si el contenido de la imagen no llena el cuadro de contenido por cualquier motivo, entonces el espacio vacío mostrará el fondo del elemento, que puede ser un color o incluso un background-image, como en el último ejemplo:

Vea la posición del objeto de lápiz por Robin Rendle (@robinrendle) en CodePen.