Docs
Aspect Ratio

Aspect Ratio

Displays content within a desired ratio.

Reference
Loading...

Installation

Install the following dependencies:

pnpm add @radix-ui/react-aspect-ratio

Copy and paste the following code into your project.

"use client";
 
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 
const AspectRatio = AspectRatioPrimitive.Root;
 
export { AspectRatio };

Update the import paths to match your project setup.

Usage

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>