Aspect Ratio

1import Image from 'next/image'
2
3import { AspectRatio } from '@/components/ui/aspect-ratio'
4
5export function AspectRatioDemo() {
6    return (
7        <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
8            <Image
9                src="/images/random-image/random-1.jpg"
10                alt="Random image"
11                fill
12                className="h-full w-full object-cover"
13            />
14        </AspectRatio>
15    )
16}
17

1import Image from 'next/image'
2
3import { AspectRatio } from '@/components/ui/aspect-ratio'
4
5export function AspectRatioDemo() {
6    return (
7        <AspectRatio ratio={4 / 3} className="bg-muted rounded-lg" width={300}>
8            <Image
9                src="/images/random-image/random-1.jpg"
10                alt="Random image"
11                fill
12                className="h-full w-full object-cover"
13            />
14        </AspectRatio>
15    )
16}
17