Layout
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
Redimensionando para cubrir
Usa la utilidad object-cover para redimensionar el contenido de un elemento para cubrir su contenedor:
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />Conteniendo dentro
Usa la utilidad object-contain para redimensionar el contenido de un elemento para que permanezca contenido dentro de su contenedor:
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />Estirando para ajustar
Usa 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" />Reduciendo la escala
Usa la utilidad object-scale-down para mostrar el contenido de un elemento en su tamaño original pero reduciéndolo para que se ajuste a su contenedor si es necesario:
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />Usando el tamaño original
Usa 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" />Responsive design
Prefija una utilidad object-fit con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />Aprende más sobre el uso de variantes en la documentación de variantes.