نسبت تصویر (Aspect Ratio)

1import { AspectRatio } from "@/components/ui/aspect-ratio";
2import Image from "next/image";
3
4export default function BasicExample() {
5  return (
6    <div className="w-[450px]">
7      <AspectRatio ratio={16 / 9}>
8        <Image
9          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
10          alt="Photo by Drew Beamer"
11          fill
12          className="rounded-md object-cover"
13        />
14      </AspectRatio>
15    </div>
16  );
17}
18

1import { AspectRatio } from "@/components/ui/aspect-ratio";
2
3export default function RatiosExample() {
4  return (
5    <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
6      <div className="w-full">
7        <p className="mb-2 text-sm font-medium">16:9 (Widescreen)</p>
8        <AspectRatio ratio={16 / 9}>
9          <div className="flex items-center justify-center h-full rounded-md bg-muted text-muted-foreground">
10            16:9
11          </div>
12        </AspectRatio>
13      </div>
14      <div className="w-full">
15        <p className="mb-2 text-sm font-medium">4:3 (Standard)</p>
16        <AspectRatio ratio={4 / 3}>
17          <div className="flex items-center justify-center h-full rounded-md bg-muted text-muted-foreground">
18            4:3
19          </div>
20        </AspectRatio>
21      </div>
22      <div className="w-full">
23        <p className="mb-2 text-sm font-medium">1:1 (Square)</p>
24        <AspectRatio ratio={1}>
25          <div className="flex items-center justify-center h-full rounded-md bg-muted text-muted-foreground">
26            1:1
27          </div>
28        </AspectRatio>
29      </div>
30      <div className="w-full">
31        <p className="mb-2 text-sm font-medium">21:9 (Ultrawide)</p>
32        <AspectRatio ratio={21 / 9}>
33          <div className="flex items-center justify-center h-full rounded-md bg-muted text-muted-foreground">
34            21:9
35          </div>
36        </AspectRatio>
37      </div>
38      <div className="w-full">
39        <p className="mb-2 text-sm font-medium">9:16 (Portrait)</p>
40        <div className="w-[120px]">
41          <AspectRatio ratio={9 / 16}>
42            <div className="flex items-center justify-center h-full rounded-md bg-muted text-muted-foreground">
43              9:16
44            </div>
45          </AspectRatio>
46        </div>
47      </div>
48    </div>
49  );
50}
51

1import { AspectRatio } from "@/components/ui/aspect-ratio";
2import Image from "next/image";
3
4export default function GridExample() {
5  return (
6    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
7      <AspectRatio ratio={1}>
8        <Image
9          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=400&dpr=2&q=80"
10          alt="Photo 1"
11          fill
12          className="rounded-lg object-cover"
13        />
14      </AspectRatio>
15      <AspectRatio ratio={1}>
16        <Image
17          src="https://images.unsplash.com/photo-1535025639604-9a804c092faa?w=400&dpr=2&q=80"
18          alt="Photo 2"
19          fill
20          className="rounded-lg object-cover"
21        />
22      </AspectRatio>
23      <AspectRatio ratio={1}>
24        <Image
25          src="https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?w=400&dpr=2&q=80"
26          alt="Photo 3"
27          fill
28          className="rounded-lg object-cover"
29        />
30      </AspectRatio>
31    </div>
32  );
33}
34