Docs
Aspect Ratio

Aspect Ratio

Aspect Ratio component allows you to display content within a desired ratio, providing control over the proportions of images, videos, or other elements. This ensures a consistent and visually appealing layout, allowing for seamless integration of various media types.

Radix UINPM
Photo by Drew Beamer

Installation

yarn add @camped-ui/aspect-ratio

Usage

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