Aspect Ratio

Displays content within a desired ratio.

By Drew Beamer
import { AspectRatio } from "~/components/ui/aspect-ratio"

export function AspectRatioDemo() {
  return (
    <AspectRatio class="rounded-lg bg-muted" ratio={16 / 9}>
      <img
        alt="By Drew Beamer"
        class="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
      />
    </AspectRatio>
  )
}

Installation

Usage

import { AspectRatio } from "~/components/ui/aspect-ratio"
<AspectRatio ratio={16 / 9}>
<img src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>