Aspect Ratio

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install @base-ui/react

Copy and paste the following code into your project.

View complete source: components/ui/aspect-ratio.tsx

Update the import paths to match your project setup.

Usage

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

<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Image" className="rounded-md object-cover" />
</AspectRatio>

Square

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

Portrait

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

RTL

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

API Reference

AspectRatio

The AspectRatio component displays content within a desired ratio.

For more information, see the Base UI documentation.