Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
Mediavisual
Valor calculadocomo se especifica
Animation typerepeatable list of simple list of length, percentage, or calc
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sinstaxis

/* <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.

Sitaxis formal

<position>

where
<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> ] ]

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 31.0 36 (36) Sin soporte 11.60-o
19.0
Sin soporte[1]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 4.4.4 36 (36) Sin soporte 11.5-o
24
Sin soporte

[1] WebKit Nightly fixed in bug 122811.

Contenido relacionado

Etiquetas y colaboradores del documento

Colaboradores en esta página: thezeeck
Última actualización por: thezeeck,