Aspect Ratio

Displays content within a desired ratio.

Radix UI
Kinshasa, République démocratique du Congo
Photo by Johnnathan Tshibangu on Unsplash

Installation

Install the primitive.

npm install @radix-ui/react-aspect-ratio

Usage

Import the AspectRatio Root part and start using it in your component.

import * as AspectRatio from '@radix-ui/react-aspect-ratio';
const MyComponent = () => (
    <div className="max-w-sm w-full">
        <AspectRatio.Root ratio={16 / 9}>
            <img
                className="size-full border object-cover rounded-[--card-radius]"
                src="/aspectRatio/ar-video.webp"
                alt="Kinshasa, République Démocratique du Congo"
                loading="lazy"
            />
        </AspectRatio.Root>
    </div>
)

Examples

Video (16:9)

Kinshasa, République démocratique du Congo
Photo by Johnnathan Tshibangu on Unsplash
 
import * as AspectRatio from "@radix-ui/react-aspect-ratio";

const MyComponent = () => (
    <div className="max-w-sm w-full">
        <AspectRatio.Root ratio={16 / 9}>
            <img
                className="size-full border object-cover rounded-[--card-radius]"
                src="/aspectRatio/ar-video.webp"
                alt="Kinshasa, République Démocratique du Congo"
                loading="lazy"
            />
        </AspectRatio.Root>
    </div>
)

Square (1:1)

Kinshasa, République démocratique du Congo
Photo by Johnnathan Tshibangu on Unsplash
 
import Separator from "@tailus-ui/Separator"

const MyComponent = () => (
    <div className="max-w-xs w-full">
        <AspectRatio.Root ratio={1/1}>
            <img
                className="size-full border object-cover rounded-[--card-radius]"
                src="/aspectRatio/ar-square.webp"
                alt="Kinshasa, République démocratique du Congo"
                loading="lazy"
            />
        </AspectRatio.Root>
    </div>
)

Portrait (9:16)

Kinshasa, République démocratique du Congo
Photo by Johnnathan Tshibangu on Unsplash
 
import * AspectRatio from "radix-ui/react-aspect-ratio"

const MyComponent = () => (
    <AspectRatio.Root className="w-56" ratio={9/16}>
        <img
            className="size-full border object-cover rounded-[--card-radius]"
            src="/aspectRatio/ar-portrait.webp"
            alt="Kinshasa, République démocratique du Congo"
            loading="lazy"
        />
    </AspectRatio.Root>
)