aspect ratio

Displays content within a desired ratio.

Photo by Drew Beamer

Installation

npx dukc-ui@latest add aspect-ratio
npx dukc-ui@latest add aspect-ratio

Usage

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

API Reference

AspectRatio

  • ratio (string, required): Aspect ratio of the container, e.g. '16/9', '4/3'.
  • className (string, optional): Additional class names to apply to the container.
  • style (React.CSSProperties, optional): Inline styles applied to the container.
  • ...props (React.HTMLProps<HTMLDivElement>): Native div element props (forwarded to Slot).
Alert DialogAvatar