Aspect Ratio

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

<AspectRatio
  ratio={16 / 9}
  class="bg-muted w-full max-w-xl overflow-hidden rounded-lg"
>
  <div
    class="text-muted-foreground flex h-full items-center justify-center text-sm font-medium"
  >
    16:9
  </div>
</AspectRatio>

Installation

npx shadcn@latest add @fulldev/aspect-ratio

Usage

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

<AspectRatio ratio={16 / 9}>
  <img src="/image.jpg" alt="Landscape" class="size-full object-cover" />
</AspectRatio>

Examples

Common Ratios

The ratio is width divided by height.

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

<div class="grid w-full max-w-2xl grid-cols-2 items-start gap-4 sm:grid-cols-4">
  <div>
    <AspectRatio ratio={1} class="bg-muted rounded-lg">
      <span
        class="text-muted-foreground flex size-full items-center justify-center text-sm"
        >1:1</span
      >
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={4 / 3} class="bg-muted rounded-lg">
      <span
        class="text-muted-foreground flex size-full items-center justify-center text-sm"
        >4:3</span
      >
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={16 / 9} class="bg-muted rounded-lg">
      <span
        class="text-muted-foreground flex size-full items-center justify-center text-sm"
        >16:9</span
      >
    </AspectRatio>
  </div>
  <div>
    <AspectRatio ratio={9 / 16} class="bg-muted max-w-24 rounded-lg">
      <span
        class="text-muted-foreground flex size-full items-center justify-center text-sm"
        >9:16</span
      >
    </AspectRatio>
  </div>
</div>

Image

The child controls its own crop. Use object-cover to fill the available area.

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

<AspectRatio
  ratio={21 / 9}
  class="bg-muted w-full max-w-2xl overflow-hidden rounded-xl"
>
  <img
    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
    alt="Mountain landscape"
    class="size-full object-cover dark:brightness-75"
  />
</AspectRatio>

API Reference

Prop	Type	Default	Description
`ratio`	`number`	required	Width divided by height, such as `16 / 9`.

class, style, and other div attributes are forwarded. String and object style values are merged with the internal ratio variable.

See the GitHub source code for the component source.

Sidebar

Search