Reddot UI Library

Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

SourceApi

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/aspect-ratio.json

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio"
<AspectRatio ratio={16 / 9} className="bg-muted">
  <Image
    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
    alt="Photo by Drew Beamer"
    fill
    className="h-full w-full rounded-md object-cover"
  />
</AspectRatio>

References