object-position

Summary

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

Valor inicial50% 50%
Applies toreplaced elements
Heredableyes
Percentagesrefer to width and height of element itself
Valor calculadocomo se especifica
Animation typerepeatable list of simple list of length, percentage, or calc

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