Aspect Ratio

1import Image from "next/image"
2 
3import {
4  Example,
5  ExampleWrapper,
6} from "@/registry/bases/radix/components/example"
7import { AspectRatio } from "@/registry/bases/radix/ui/aspect-ratio"
8 
9export default function AspectRatioExample() {
10  return (
11    <ExampleWrapper className="max-w-4xl 2xl:max-w-4xl">
12      <AspectRatio16x9 />
13      <AspectRatio21x9 />
14      <AspectRatio1x1 />
15      <AspectRatio9x16 />
16    </ExampleWrapper>
17  )
18}
19 
20function AspectRatio16x9() {
21  return (
22    <Example title="16:9" className="items-center justify-center">
23      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
24        <Image
25          src="https://avatar.vercel.sh/shadcn1"
26          alt="Photo"
27          fill
28          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
29        />
30      </AspectRatio>
31    </Example>
32  )
33}
34 
35function AspectRatio1x1() {
36  return (
37    <Example title="1:1" className="items-start">
38      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
39        <Image
40          src="https://avatar.vercel.sh/shadcn1"
41          alt="Photo"
42          fill
43          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
44        />
45      </AspectRatio>
46    </Example>
47  )
48}
49 
50function AspectRatio9x16() {
51  return (
52    <Example title="9:16" className="items-center justify-center">
53      <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
54        <Image
55          src="https://avatar.vercel.sh/shadcn1"
56          alt="Photo"
57          fill
58          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
59        />
60      </AspectRatio>
61    </Example>
62  )
63}
64 
65function AspectRatio21x9() {
66  return (
67    <Example title="21:9" className="items-center justify-center">
68      <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
69        <Image
70          src="https://avatar.vercel.sh/shadcn1"
71          alt="Photo"
72          fill
73          className="h-full w-full rounded-lg object-cover grayscale dark:brightness-20"
74        />
75      </AspectRatio>
76    </Example>
77  )
78}