AspectRatio

Descripción

Componente que mantiene un ratio de aspecto específico en su contenido, útil para imágenes, videos y otros elementos donde es importante preservar las proporciones.

Importación

import { AspectRatio } from "@/components/ui/aspect-ratio";

Propiedades

ratio

Define la relación de aspecto del componente (ancho/alto).

Tipo: number

Predeterminado: 1/1 (cuadrado)

Ejemplo básico


<div className="w-full max-w-sm">
  <AspectRatio ratio={16/9}>
    <img
      src="https://example.com/image.jpg"
      alt="Imagen"
      className="object-cover w-full h-full rounded-md"
    />
  </AspectRatio>
</div>

Imagen con ratio 16:9

Ejemplos adicionales

1:1 (Cuadrado)

1:1

4:3 (Estándar)

4:3

21:9 (UltraWide)

21:9

Uso común

Tarjetas de productos para mantener imágenes consistentes
Galerías de fotos con proporciones uniformes
Vídeos embebidos para mantener ratio 16:9
Placeholders para contenido con carga diferida
Miniaturas en listas de contenido

Volver a componentes UI