AspectRatio

Contenedor que mantiene una relación de aspecto fija. Ideal para imágenes y videos.

---

Import

import { AspectRatio } from '@imansi/ui';

---

Uso básico

<AspectRatio ratio={16 / 9}>
  <img
    src="/imagen.jpg"
    alt="Imagen"
    className="h-full w-full rounded-md object-cover"
  />
</AspectRatio>

---

Ratios comunes

<AspectRatio ratio={16 / 9}>...</AspectRatio>  {/* video, widescreen */}
<AspectRatio ratio={4 / 3}>...</AspectRatio>   {/* foto clásica */}
<AspectRatio ratio={1}>...</AspectRatio>        {/* cuadrado, Instagram */}
<AspectRatio ratio={9 / 16}>...</AspectRatio>   {/* story, vertical */}

---

Con video embebido

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Video"
    className="h-full w-full rounded-md"
    allowFullScreen
  />
</AspectRatio>

---

Props

Prop	Tipo	Default	Descripción
ratio	number	1	Relación de aspecto (ancho / alto)
className	string	—	Clases adicionales

---

Uso típico

• Imágenes de blog que no se deforman
• Videos embebidos
• Cards de producto con imagen cuadrada
• Banners con ratio fijo