Aspect Ratio — Componentes

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add aspect-ratio

Development (local registry):

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add aspect-ratio --yes

Usage

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

<div class="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <img src="..." alt="Image" class="rounded-md object-cover" />
  </AspectRatio>
</div>

Examples

16:9 (Video)

<AspectRatio ratio={16 / 9}>
  <img src="..." alt="Video thumbnail" class="object-cover" />
</AspectRatio>

4:3 (Photo)

<AspectRatio ratio={4 / 3}>
  <img src="..." alt="Photo" class="object-cover" />
</AspectRatio>

1:1 (Square)

<AspectRatio ratio={1}>
  <img src="..." alt="Square image" class="object-cover" />
</AspectRatio>

With Video

<AspectRatio ratio={16 / 9}>
  <iframe
    src="https://www.youtube.com/embed/..."
    class="h-full w-full"
    allowfullscreen
  />
</AspectRatio>

Props

AspectRatio

Prop	Type	Default	Description
`ratio`	`number`	`1`	The desired aspect ratio (e.g., 16/9, 4/3, 1)
`class`	`string`	-	Additional CSS classes

How It Works

The component uses the padding-bottom trick to maintain the aspect ratio:

The wrapper has position: relative and padding-bottom set to 100 / ratio%
The content is positioned absolutely to fill the wrapper
This ensures the container maintains its ratio regardless of content