Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Photo by Drew Beamer

Installation

// FIXME: react-aspect-ratio is not published yet
npm install @brudi/react-aspect-ratio

Usage

import Image from "next/image"
 
import { AspectRatio } from "@brudi/react-aspect-ratio"
<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

Customization

npx @brudi/ui extend aspect-ratio