Aspect Ratio

Displays content, such as an image or video, within a desired width-to-height ratio.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/aspect-ratio

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio"
 
export function Example() {
  return (
    <div className="w-64">
      <AspectRatio ratio={16 / 9}>
        <img
          src="/image.jpg"
          alt="Photo"
          className="size-full rounded-lg object-cover"
        />
      </AspectRatio>
    </div>
  )
}

Examples

Square

RTL

Aspect Ratio has no directional CSS, so it needs no RTL-specific handling — content placed inside it (like this caption) still respects the surrounding text direction.

API Reference