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

Sinstaxis

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

Sitaxis formal

<position> (en-US)

where
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)

where
<length-percentage> = <length> | (en-US) <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! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte b谩sico 31.0 36 (36) Sin soporte 11.60-o (en-US)
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 (en-US)
24
Sin soporte

[1] WebKit Nightly fixed in bug 122811.

Contenido relacionado