Tu privacidad es importante

    Utilizamos cookies para mejorar tu experiencia, mostrar contenido personalizado y analizar el tráfico del sitio. Para más información, visita nuestra política de cookies.

    Volver a UI

    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