Aspect Ratio | Bearnie

<AspectRatio ratio={16 / 9} class="bg-muted">
<img src="/images/readme/bearnie.png" alt="Landscape" class="rounded-md object-cover size-full" />
</AspectRatio>

Installation

npx bearnie add aspect-ratio

import AspectRatio from "@/components/ui/aspect-ratio/AspectRatio.astro";

Usage

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

<AspectRatio ratio={16 / 9}>
<img src="..." alt="..." class="object-cover w-full h-full" />
</AspectRatio>

Examples

16:9 (Video)

16:9 Video

<AspectRatio ratio={16 / 9} class="bg-muted rounded-md">
<div class="flex items-center justify-center h-full text-muted-foreground">
  16:9 Video
</div>
</AspectRatio>

4:3 (Standard)

4:3 Standard

<AspectRatio ratio={4 / 3} class="bg-muted rounded-md">
<div class="flex items-center justify-center h-full text-muted-foreground">
  4:3 Standard
</div>
</AspectRatio>

1:1 (Square)

1:1 Square

<AspectRatio ratio={1} class="bg-muted rounded-md">
<div class="flex items-center justify-center h-full text-muted-foreground">
  1:1 Square
</div>
</AspectRatio>

21:9 (Ultrawide)

21:9 Ultrawide

<AspectRatio ratio={21 / 9} class="bg-muted rounded-md">
<div class="flex items-center justify-center h-full text-muted-foreground">
  21:9 Ultrawide
</div>
</AspectRatio>

Portrait (2:3)

2:3 Portrait

<AspectRatio ratio={2 / 3} class="bg-muted rounded-md">
<div class="flex items-center justify-center h-full text-muted-foreground">
  2:3 Portrait
</div>
</AspectRatio>

Anatomy

AspectRatio - A single container that maintains proportions

Props

AspectRatio

Prop	Type	Default	Description
ratio	number	16/9	Width-to-height ratio
class	string	-	Additional CSS classes

Common ratios: 16/9 (video), 4/3 (standard), 1 (square), 21/9 (ultrawide), 2/3 (portrait)