Aspect Ratio

 1import {
 2  AspectRatio,
 3  AspectRatioImage,
 4} from "@/components/wensity/aspect-ratio";
 5
 6export function AspectRatioVideo() {
 7  return (
 8    <AspectRatio variant="video" className="max-w-md">
 9      <AspectRatioImage
10        src="https://assets.wensity.com/photos/landscape/canyon-falls.webp"
11        alt="Waterfall dropping through a green canyon"
12      />
13    </AspectRatio>
14  );
15}

 1import {
 2  AspectRatio,
 3  AspectRatioImage,
 4} from "@/components/wensity/aspect-ratio";
 5
 6export function AspectRatioPortrait() {
 7  return (
 8    <AspectRatio variant="portrait" className="max-w-xs">
 9      <AspectRatioImage
10        src="https://assets.wensity.com/photos/portrait/twin-falls-lagoon.webp"
11        alt="Twin waterfalls feeding a turquoise mountain lagoon"
12      />
13    </AspectRatio>
14  );
15}

 1import {
 2  AspectRatio,
 3  AspectRatioImage,
 4} from "@/components/wensity/aspect-ratio";
 5
 6export function AspectRatioSquare() {
 7  return (
 8    <AspectRatio variant="square" className="max-w-xs">
 9      <AspectRatioImage
10        src="https://assets.wensity.com/photos/portrait/mirror-lake.webp"
11        alt="Mountain range reflected in a still alpine lake"
12      />
13    </AspectRatio>
14  );
15}

 1import {
 2  AspectRatio,
 3  AspectRatioImage,
 4} from "@/components/wensity/aspect-ratio";
 5
 6export function AspectRatioCinema() {
 7  return (
 8    <AspectRatio variant="cinema" className="max-w-lg">
 9      <AspectRatioImage
10        src="https://assets.wensity.com/photos/landscape/river-valley-sunset.webp"
11        alt="Wide sunset view over a winding river valley"
12      />
13    </AspectRatio>
14  );
15}

 1import {
 2  AspectRatio,
 3  AspectRatioImage,
 4} from "@/components/wensity/aspect-ratio";
 5
 6export function AspectRatioPhoto() {
 7  return (
 8    <AspectRatio variant="photo" className="max-w-sm">
 9      <AspectRatioImage
10        src="https://assets.wensity.com/photos/landscape/sunrise-glacier-peaks.webp"
11        alt="Classic framed mountain range photograph at sunrise"
12      />
13    </AspectRatio>
14  );
15}