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

Usage

import { AspectRatio } from "@/components/bearnie/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)