Aspect Ratio

Displays content within a chosen aspect ratio.

<div class="h-full w-full bg-muted flex items-center justify-center text-sm text-muted-foreground">Content</div>

<.aspect_ratio><div class="h-full w-full bg-muted flex items-center justify-center text-sm text-muted-foreground">Content</div></.aspect_ratio>

Examples

Common ratios

16:9 (widescreen), 4:3 (standard), and 1:1 (square).

16 / 9

16 : 9

4 / 3

4 : 3

1 / 1

1 : 1

<div class="flex flex-col gap-6">
  <div>
    <p class="mb-2 text-sm text-muted-foreground">16 / 9</p>
    <.aspect_ratio ratio="16 / 9" class="w-[400px] overflow-hidden rounded-md bg-muted">
      <div class="h-full w-full bg-gradient-to-br from-primary/30 to-primary/10 flex items-center justify-center text-sm text-muted-foreground">16 : 9</div>
    </.aspect_ratio>
  </div>
  <div>
    <p class="mb-2 text-sm text-muted-foreground">4 / 3</p>
    <.aspect_ratio ratio="4 / 3" class="w-[320px] overflow-hidden rounded-md bg-muted">
      <div class="h-full w-full bg-gradient-to-br from-accent/50 to-accent/20 flex items-center justify-center text-sm text-muted-foreground">4 : 3</div>
    </.aspect_ratio>
  </div>
  <div>
    <p class="mb-2 text-sm text-muted-foreground">1 / 1</p>
    <.aspect_ratio ratio="1 / 1" class="w-[200px] overflow-hidden rounded-md bg-muted">
      <div class="h-full w-full bg-gradient-to-br from-secondary/50 to-secondary/20 flex items-center justify-center text-sm text-muted-foreground">1 : 1</div>
    </.aspect_ratio>
  </div>
</div>

Show code

With image

Wrapping an image keeps it locked to a ratio regardless of its intrinsic size.

<.aspect_ratio ratio="16 / 9" class="w-[400px] overflow-hidden rounded-md bg-muted">
  <img
    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    alt="Photo by Drew Beamer"
    class="h-full w-full object-cover"
  />
</.aspect_ratio>

Show code

Props

Name	Type	Default
class	:string
ratio	:string	"1 / 1"
rest	:global
inner_block (slot)	:slot