jueves, 17 de noviembre de 2022

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

<position>

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
= |

descripción

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

object-position

Compatibilidad con el navegador

object-position


Fuentes de consulta:

https://reference.codeproject.com/css/object-position



¡¡Aprender es interesante y divertido!!


Salu2 y bendiciones,
Atte, Angel Paz
Duda con el Efecto rayo 71pkhu