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

Ejemplo

Ejemplo de HTML

<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>

Ejemplo de 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%;
}

Resultado

Especificaciones

Specification Status Comment
CSS Images Module Level 4
La definición de 'object-position' en esta especificación.
Working Draft

Las  palabras clave from-image y flip an sido añadidas.

CSS Images Module Level 3
La definición de 'object-position' en esta especificación.
Candidate Recommendation Definición incial

Compatibilidad con navegadores

BCD tables only load in the browser

Contenido relacionado