object-position

Summary

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

Valor inicial	`50% 50%`
Applies to	replaced elements
Heredable	yes
Percentages	refer to width and height of element itself
Valor calculado	como se especifica
Animation type	a repeatable list of

Sintaxis

/* <position> valores */
object-position: 100px 50px;

/* Valores globales */
object-position: inherit;
object-position: initial;
object-position: unset;

Valores

<position>: <position> (en-US), 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> = 
  [ left | center | right ] || [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<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

Specification
CSS Images Module Level 3 # the-object-position

Compatibilidad con navegadores

BCD tables only load in the browser

Contenido relacionado

Other image-related CSS properties: object-fit, image-orientation (en-US), image-rendering, image-resolution (en-US).