Aspect Ratio

1import { AspectRatio } from "@/components/ui/aspect-ratio"23function AspectRatioDemo() {4  return (5    <div className="w-full max-w-md">6      <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg bg-muted">7        <img8          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"9          alt="Photo by Drew Beamer"10          className="object-cover w-full h-full"11        />12      </AspectRatio>13    </div>14  )15}

1import { AspectRatio } from "@/components/ui/aspect-ratio"23function AspectRatioDemo() {4  return (5    <div className="grid grid-cols-3 gap-4 w-full max-w-2xl">6      <div>7        <p className="text-sm text-muted-foreground mb-2">1:1</p>8        <AspectRatio ratio={1} className="overflow-hidden rounded-lg">9          <div className="w-full h-full bg-muted flex items-center justify-center">10            <span className="text-sm text-muted-foreground">1:1</span>11          </div>12        </AspectRatio>13      </div>14      <div>15        <p className="text-sm text-muted-foreground mb-2">16:9</p>16        <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">17          <div className="w-full h-full bg-muted flex items-center justify-center">18            <span className="text-sm text-muted-foreground">16:9</span>19          </div>20        </AspectRatio>21      </div>22      <div>23        <p className="text-sm text-muted-foreground mb-2">4:3</p>24        <AspectRatio ratio={4 / 3} className="overflow-hidden rounded-lg">25          <div className="w-full h-full bg-muted flex items-center justify-center">26            <span className="text-sm text-muted-foreground">4:3</span>27          </div>28        </AspectRatio>29      </div>30    </div>31  )32}