Atributo object-position de CSS

Definición y uso

El atributo object-position, utilizado junto con object-fit, define cómo se debe usar la ubicación de coordenadas x/y para <img> o <video> dentro de su "propio cuadro de contenido".

Vea también:

Tutoriales de CSS:object-fit de CSS

Manual de referencia de CSS:object-position de CSS

Manual de referencia de HTML DOM:Atributo objectPosition

Ejemplo

Ajuste el tamaño de la imagen para que se ajuste a su cuadro de contenido, y mueva la imagen en el cuadro de contenido desde la izquierda 5px, desde la parte superior 10%:

img.a {
  width: 200px;
  height: 400px;
  object-fit: none;
  object-position: 5px 10%;
  border: 5px sólido rojo;
}

Pruebe usted mismo

Sintaxis de CSS

object-position: position|initial|inherit;

Valor del atributo

Valor Descripción
position

Define la posición de la imagen o el video dentro de su cuadro de contenido.

El primer valor controla el eje x, el segundo valor controla el eje y.

Puede ser una cadena (izquierda, centro o derecha) o un número (en px o %). Se admiten valores negativos.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo de su elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: 50% 50%
Herencia: sí
Producción de animación: Admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.objectPosition="0 10%"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que completamente admite esta propiedad.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 10.0 19.0