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.
Compatibilidad con el navegador
Fuentes de consulta: https://reference.codeproject.com/css/object-position
Salu2 y bendiciones, Atte, Angel Paz | ![]() |