Aspect Ratio

<AspectRatio ratio={16 / 9} class="w-64 overflow-hidden rounded-md bg-muted">
  <div class="flex h-full w-full items-center justify-center text-sm text-muted-foreground">16 / 9</div>
</AspectRatio>

Constrains its content to a fixed width-to-height ratio.

Installation

railbase ui add aspect-ratio

Usage

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

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