Aspect Ratio

A responsive container component that maintains a fixed aspect ratio, commonly used for media like images and videos.

PreviewCode

An accessible Aspect Ratio component built with Radix UI

Installation

npx scrollx-ui@latest add aspect-ratio

Usage

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

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

API Reference

AspectRatio

The root container for the AspectRatio component, which helps to maintain a consistent aspect ratio for its child content, like images or videos.

AspectRatioProps

Props that can be passed to the AspectRatio component.

• ratio - The aspect ratio of the container. Accepts a number (e.g., 16/9, 4/3, 1/1).
• className - Optional class name for custom styling of the aspect ratio container.
• children - The content (e.g., an image, video, or other media) inside the AspectRatio container.

AspectRatioChild

The child component or element inside the AspectRatio container.

• fill - Used to ensure the child element (like an image) fills the entire aspect ratio container.
• className - Optional class name for custom styling of the child content.
• object-cover - Used to ensure the child element maintains its aspect ratio while covering the container's bounds.