Aspect Ratio

A container that maintains a specific aspect ratio for its content, useful for images, videos, and other media.

How to Import

Add this import to your component file

app/page.tsx

1import { AspectRatio } from '@/components/lightswind/aspect-ratio';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

ratio	number	1	The aspect ratio to maintain (width/height).	Optional
preset	"square" \| "video" \| "portrait" \| "widescreen" \| "ultrawide" \| "golden"	-	Predefined aspect ratios for common use cases.	Optional
rounded	boolean	false	Whether to apply rounded corners.	Optional
bordered	boolean	false	Whether to show a border.	Optional
objectFit	"cover" \| "contain" \| "fill" \| "none" \| "scale-down"	-	Optional object-fit style for child elements.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AspectRatio } from '@/components/lightswind/aspect-ratio';
2import Image from 'next/image';
3
4export function AspectRatioDemo() {
5  return (
6    <div className="w-[300px]">
7      <AspectRatio ratio={16 / 9}>
8        <img
9          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
10          alt="Image"
11          className="rounded-md object-cover w-full h-full"
12        />
13      </AspectRatio>
14    </div>
15  );
16}

Previousaccordion

Nextresizable

A product byＭＵＨＩＬＡＮ and Team❤️.

Aspect Ratio

A container that maintains a specific aspect ratio for its content, useful for images, videos, and other media.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AspectRatio } from '@/components/lightswind/aspect-ratio';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

ratio	number	1	The aspect ratio to maintain (width/height).	Optional
preset	"square" \| "video" \| "portrait" \| "widescreen" \| "ultrawide" \| "golden"	-	Predefined aspect ratios for common use cases.	Optional
rounded	boolean	false	Whether to apply rounded corners.	Optional
bordered	boolean	false	Whether to show a border.	Optional
objectFit	"cover" \| "contain" \| "fill" \| "none" \| "scale-down"	-	Optional object-fit style for child elements.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { AspectRatio } from '@/components/lightswind/aspect-ratio';
2import Image from 'next/image';
3
4export function AspectRatioDemo() {
5  return (
6    <div className="w-[300px]">
7      <AspectRatio ratio={16 / 9}>
8        <img
9          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
10          alt="Image"
11          className="rounded-md object-cover w-full h-full"
12        />
13      </AspectRatio>
14    </div>
15  );
16}

Previousaccordion

Nextresizable

A product byＭＵＨＩＬＡＮ and Team❤️.

Aspect Ratio

How to Import

Props

Basic Usage

On This Page

Contribute

Aspect Ratio

How to Import

Props

Basic Usage

On This Page

Contribute

React Aspect Ratio Component - Lightswind UI

Key Details of React Aspect Ratio

Aspect Ratio

How to Import

Props

Basic Usage

On This Page

Contribute

Aspect Ratio

How to Import

Props

Basic Usage

On This Page

Contribute