object-position

Summary

La propiedad object-position determina el alineamiento del elemento dentro de la caja.

Sintaxis

/* <position> valores */
object-position: 100px 50px;
/* Valores globales */
object-position: inherit;
object-position: initial;
object-position: unset;

Valores

<position>

<position>, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.

Sintaxis formal

object-position = 
 <position> 

<position> = 
 <position-one> | 
 <position-two> | 
 <position-four> 

<position-one> = 
 left | 
 center | 
 right | 
 top | 
 bottom | 
 x-start | 
 x-end | 
 y-start | 
 y-end | 
 block-start | 
 block-end | 
 inline-start | 
 inline-end | 
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] | 
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | 
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] | 
 [ start | center | end ] {2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] | 
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] | 
 [ [ start | end ] <length-percentage> ] {2} 

<length-percentage> = 
 <length> | 
 <percentage> 

Ejemplo

Ejemplo de HTML

<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />

Ejemplo de CSS

img {
 width: 300px;
 height: 250px;
 border: 1px solid black;
 background-color: silver;
 margin-right: 1em;
 object-fit: none;
}
#object-position-1 {
 object-position: 10px;
}
#object-position-2 {
 object-position: 100% 10%;
}

Resultado

Especificaciones

Compatibilidad con navegadores

Contenido relacionado

• Other image-related CSS properties: object-fit, image-orientation, image-rendering, image-resolution.