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.

Photo by Drew Beamer


yarn add @camped-ui/aspect-ratio


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" />