aspect-ratio

Ejemplos

Ejemplo básico

Usa utilidades aspect-<ratio> como aspect-3/2 para darle 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" />

Usando una relación de aspecto de video

Usa la utilidad aspect-video para darle a un elemento de video una relación de aspecto de 16 / 9:

<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Usando un valor personalizado

Usa la sintaxis aspect-[<value>] para establecer el aspect ratio basado 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 agrega la función var() por ti automáticamente.

Diseño Responsive

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

<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

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

Personalizando tu tema

Usa las variables de tema --aspect-* para personalizar las utilidades aspect ratio en tu proyecto:

@theme {
  --aspect-retro: 4 / 3; 
}

Ahora la utilidad aspect-retro puede ser usada en tu marcado:

<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Aprende más sobre la personalización de tu tema en la documentación del tema.