object-position

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
Animatableyes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
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>

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 Image Values and Replaced Content Module Level 4
The definition of 'object-position' in that specification.
Working Draft

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

CSS Image Values and Replaced Content Module Level 3
The definition of 'object-position' in that specification.
Candidate Recommendation Definición incial

Compatibilidad con navegadores

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

[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,