WFP logoDesign System
Components

Aspect Ratio

View on shadcn/ui

Displays content within a desired ratio.

WFP humanitarian work

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/aspect-ratio.json

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";
<AspectRatio ratio={16 / 9}>
  <img src="…" alt="…" className="h-full w-full object-cover" />
</AspectRatio>

API reference

This component is built on top of Radix UI Aspect Ratio. For additional props and detailed API documentation, refer to the Radix documentation.

On this page

InstallationUsageAPI reference