object-position

Ejemplos

Ejemplo básico

Usa utilidades como object-left y object-bottom-right para especificar cómo se debe posicionar el contenido de un elemento reemplazado dentro de su contenedor:

Pasa el cursor sobre los ejemplos para ver la imagen completa

object-top-left

object-top

object-top-right

object-left

object-center

object-right

object-bottom-left

object-bottom

object-bottom-right

<img class="size-24 object-top-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-top ..." src="/img/mountains.jpg" />
<img class="size-24 object-top-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-center ..." src="/img/mountains.jpg" />
<img class="size-24 object-right ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-left ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom ..." src="/img/mountains.jpg" />
<img class="size-24 object-bottom-right ..." src="/img/mountains.jpg" />

Usando un valor personalizado

Usa la sintaxis object-[<value>] para establecer el object position basado en un valor completamente personalizado:

<img class="object-[25%_75%] ..." src="/img/mountains.jpg" />

Para variables CSS, también puedes usar la sintaxis object-(<custom-property>) :

<img class="object-(--my-object) ..." src="/img/mountains.jpg" />

Esto es solo un atajo para object-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad object-position con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<img class="object-center md:object-top ..." src="/img/mountains.jpg" />

Aprende más sobre el uso de variantes en la documentación de variantes.