---
title: Aspect Ratio
description: A container that maintains a specific aspect ratio for its content, useful for images, videos, and other media.
---

<ComponentPreview name="aspect-ratio-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx lightswind@latest add aspect-ratio
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

```tsx

import * as React from "react";
import { cn } from "@/components/lib/utils";

interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The aspect ratio to maintain (width/height) */
  ratio?: number;
  /** Predefined aspect ratios for common use cases */
  preset?: "square" | "video" | "portrait" | "widescreen" | "ultrawide" | "golden";
  /** Whether to apply rounded corners */
  rounded?: boolean;
  /** Whether to show a border */
  bordered?: boolean;
  /** Optional object-fit style for child elements */
  objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
}

const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
  ({ 
    className, 
    ratio: propRatio, 
    preset,
    rounded = false,
    bordered = false,
    objectFit,
    style, 
    ...props 
  }, ref) => {
    // Predefined aspect ratios
    const presetRatios = {
      square: 1,             // 1:1
      video: 16/9,           // 16:9
      portrait: 3/4,         // 3:4
      widescreen: 16/9,      // 16:9
      ultrawide: 21/9,       // 21:9
      golden: 1.618          // Golden ratio
    };

    // Determine the final ratio to use
    const ratio = propRatio || (preset ? presetRatios[preset] : 1);

    return (
      <div
        ref={ref}
        style={{
          position: "relative",
          width: "100%",
          paddingBottom: `${(1 / ratio) * 100}%`,
          ...style,
        }}
        className={cn(
          "overflow-hidden",
          rounded && "rounded-md",
          bordered && "border  ",
          className
        )}
        {...props}
      >
        {props.children && (
          <div 
            className={cn(
              "absolute inset-0 h-full w-full",
              objectFit && `[&>img]:object-${objectFit} [&>video]:object-${objectFit}`
            )}
          >
            {props.children}
          </div>
        )}
      </div>
    );
  }
);
AspectRatio.displayName = "AspectRatio";

export { AspectRatio };

```

</Steps>

</TabsContent>

</Tabs>

## Usage

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

```tsx
import { AspectRatio } from '@/components/lightswind/aspect-ratio';
import Image from 'next/image';

export function AspectRatioDemo() {
  return (
    <div className="w-[300px]">
      <AspectRatio ratio={16 / 9}>
        <img
          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
          alt="Image"
          className="rounded-md object-cover w-full h-full"
        />
      </AspectRatio>
    </div>
  );
}
```