Aspect Ratio

Copy

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

View Code

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add aspect-ratio
Copy

Usage

Copyimport { AspectRatio } from "@/components/ui/aspect-ratio"

Copy<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md 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.

Copy

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

View Code

Portrait

A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.

Copy

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

View Code

RTL

To enable RTL support in StyleDriven UI, see the RTL configuration guide.

Arabic (العربية)Toggle

Copy

"use client"

import * as React from "react"

View Code

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

For more information, see the Base UI documentation.