Aspect Ratio

1import { AspectRatio } from "passport-ui";
2import { Card, CardContent } from "passport-ui";

1<div className="w-sm">
2  <AspectRatio ratio={16 / 9}>
3    <Card className="h-full">
4      <CardContent>
5        <div className="meta-container">
6          <h3>Aspect Ratio</h3>
7          <p>16:9</p>
8        </div>
9      </CardContent>
10    </Card>
11  </AspectRatio>
12</div>
13 
14{/* Square aspect ratio */}
15<AspectRatio ratio={1}>
16  <Card className="h-full">
17    <CardContent>
18      <div className="meta-container">
19        <h3>Aspect Ratio</h3>
20        <p>1:1</p>
21      </div>
22    </CardContent>
23  </Card>
24</AspectRatio>
25 
26{/* With image */}
27<AspectRatio ratio={16 / 9}>
28  <img
29    src="https://placehold.co/1600x900"
30    alt="Placeholder"
31    className="rounded-md object-cover"
32  />
33</AspectRatio>