Diseño
aspect-ratio
Utilidades para controlar la relación de aspecto de un elemento.
| Clase | Estilos |
|---|---|
aspect-<ratio> | aspect-ratio: <ratio>; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: var(--aspect-video); /* 16 / 9 */ |
aspect-auto | aspect-ratio: auto; |
aspect-(<custom-property>) | aspect-ratio: var(<custom-property>); |
aspect-[<value>] | aspect-ratio: <value>; |
Ejemplos
Ejemplo básico
Utiliza las utilidades aspect-<ratio> como aspect-3/2 para dar a un elemento una relación de aspecto específica:
Redimensiona el ejemplo para ver el comportamiento esperado
<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />Utilizar una relación de aspecto de video
Utiliza la utilidad aspect-video para dar a un elemento de video una relación de aspecto de 16 / 9:
Redimensiona el ejemplo para ver el comportamiento esperado
<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>Usar un valor personalizado
Usa la sintaxis aspect-[<value>] para establecer el/la relación de aspecto basándose en un valor completamente personalizado:
<img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />Para variables CSS, también puedes usar la sintaxis aspect-(<custom-property>) :
<img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />Esto es solo un atajo para aspect-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Diseño responsivo
Antepone a la utilidad aspect-ratio el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>Obtén más información sobre el uso de variantes en la documentación de variantes.
Personalizar el tema
Usa las variables de tema --aspect-* para personalizar las utilidades de relación de aspecto en tu proyecto:
@theme { --aspect-retro: 4 / 3; }Ahora se puede usar la utilidad aspect-retro en tu marcado:
<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>Obtén más información sobre cómo personalizar tu tema en la documentación del tema.