Diseño
object-fit
Utilidades para controlar cómo se debe redimensionar el contenido de un elemento reemplazado.
| Clase | Estilos |
|---|---|
object-contain | object-fit: contain; |
object-cover | object-fit: cover; |
object-fill | object-fit: fill; |
object-none | object-fit: none; |
object-scale-down | object-fit: scale-down; |
Ejemplos
Redimensionar para cubrir
Utiliza la utilidad object-cover para redimensionar el contenido de un elemento de modo que cubra su contenedor:
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />Contener dentro
Utiliza la utilidad object-contain para redimensionar el contenido de un elemento de modo que se mantenga contenido dentro de su contenedor:
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />Estirar para ajustar
Utiliza la utilidad object-fill para estirar el contenido de un elemento para que se ajuste a su contenedor:
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />Reducir escala
Utiliza la utilidad object-scale-down para mostrar el contenido de un elemento en su tamaño original pero reduciendo su escala para que se ajuste a su contenedor si es necesario:
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />Usar el tamaño original
Utiliza la utilidad object-none para mostrar el contenido de un elemento en su tamaño original ignorando el tamaño del contenedor:
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />Diseño responsivo
Antepone a la utilidad object-fit el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />Obtén más información sobre el uso de variantes en la documentación de variantes.