los object-position CSS propiedad especifica la alineación del contenido del elemento reemplazado seleccionado dentro de la caja del elemento. Las áreas del cuadro que no están cubiertas por el objeto del elemento reemplazado mostrarán el fondo del elemento.

Puede ajustar cómo se ajusta el tamaño intrínseco del objeto del elemento reemplazado (es decir, su tamaño natural) para que quepa dentro de la caja del elemento usando el object-fit propiedad.

Sintaxis

/* <position> values */
object-position: center top;
object-position: 100px 50px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;

Valores

<position>
De uno a cuatro valores que definen la posición 2D del elemento. Se pueden utilizar compensaciones relativas o absolutas.

Nota: La posición se puede establecer de modo que el elemento reemplazado se dibuje fuera de su caja.

Definicion formal

Valor inicial 50% 50%
Se aplica a elementos reemplazados
Heredado sí
Porcentajes referirse al ancho y alto del propio elemento
Valor calculado Como se especificó
Tipo de animación lista repetible de lista simple de longitud, porcentaje o cálculo

Sintaxis 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>

Ejemplos de

Colocación del contenido de la imagen

HTML

Aquí vemos HTML que incluye dos <img> elementos, cada uno con el logotipo de MDN.

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

CSS

El CSS incluye un estilo predeterminado para <img> elemento en sí, así como estilos separados para cada una de las dos imágenes.

img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

La primera imagen se coloca con el borde izquierdo insertado a 10 píxeles del borde izquierdo del cuadro del elemento. La segunda imagen se coloca con su borde derecho al ras contra el borde derecho de la caja del elemento y se encuentra el 10% del camino hacia abajo de la altura de la caja del elemento.

Resultado

Especificaciones

Especificación Estado Comentario
Módulo de Imágenes CSS Nivel 3
La definición de ‘posición de objeto’ en esa especificación.		 Recomendación candidata Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
object-position 32

79 16-79 Solo compatible con <img> elementos.

36 No

19 11.6-15

10 4.4.3 32 36

19 12-14

10 2.0
three_value_syntax 32-68 16-79 36-70 No

19-55 11.6-15

10-13.1 4.4.3-68 32-68 36-79

19-48 12-14

10-13,4 2.0-10.0

Ver también

  • Otras propiedades CSS relacionadas con la imagen: object-fit, image-orientation, image-rendering, image-resolution.