Skip to Content
Shadcn ComponentsAspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Photo by Drew Beamer

Installation

npx shadcn@latest add @uipath/aspect-ratio

Usage

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

Common Ratios

  • 16:9 - Standard video format
  • 4:3 - Traditional TV format
  • 1:1 - Square format
  • 21:9 - Ultra-wide format