​
Code

import Image from "next/image";

import { AspectRatio } from "@trytoolify/ui/aspect-ratio";

export function AspectRatioDemo() {
    return (
        <AspectRatio ratio={16 / 9} className="bg-muted">
            <Image
                src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
                alt="Photo by Drew Beamer"
                fill
                className="rounded-md object-cover"
            />
        </AspectRatio>
    );
}

​
Usage

import Image from "next/image";

import { AspectRatio } from "@trytoolify/ui/aspect-ratio";

<div className="w-[450px]">
    <AspectRatio ratio={16 / 9}>
        <Image src="..." alt="Image" className="rounded-md object-cover" />
    </AspectRatio>
</div>
Area ChartAvatar