Aspect Ratio
Displays content within a desired ratio.
"use client"
import Image from "next/image"
import { AspectRatio } from "uilab-core"
Usage
import { AspectRatio } from "uilab-core"<AspectRatio ratio={16 / 9}>
<Image src="..." alt="Photo" fill className="rounded-lg object-cover" />
</AspectRatio>Examples
Square
A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.
"use client"
import Image from "next/image"
import { AspectRatio } from "uilab-core"
Portrait
A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.
"use client"
import Image from "next/image"
import { AspectRatio } from "uilab-core"