CSS IMAGENES: Propiedad CSS - object-position (posición del objeto)

La propiedad object-position determina la alineación del elemento reemplazado dentro de su caja.

Ejemplo

1 Contenido HTML

 
<img id="object-position-1" src="https://elicecreativo.com/wp-content/uploads/2021/05/creative.pn" alt="example"/>
<img id="object-position-2" src="https://elicecreativo.com/wp-content/uploads/2021/05/coding.png" alt="example""/>

2 Contenido CSS

 
  img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  margin-right: 1em;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 20% 10%;
}

Producción

Te dejo la página de fiddle para que veas cómo funciona el ejemplo.

Sintaxis

   
  /*  values */
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

valores

Es a <position>, que es de uno a cuatro valores que representan una posición 2D con respecto a los bordes de la caja del elemento. Se pueden dar compensaciones relativas o absolutas. Tenga en cuenta que la posición se puede establecer fuera del cuadro del elemento.

Nota:
La <position> El tipo de datos CSS denota una coordenada en un espacio 2D utilizado para establecer una ubicación relativa a un cuadro.

sintaxis formal

   
where 
 = [[ left | center | right | top | bottom |  ] | [ left | center | right |  ] [ top | center | bottom |  ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]]
where 
 =  |