laif-ds/dist/agent-docs/components/AspectRatio.md

Design System di Laif con componenti React basati su principi di Atomic Design

# AspectRatio

## Overview

A container that maintains a consistent aspect ratio for its content. Useful for images, videos, and any media that requires a fixed ratio.

---

## Props

### AspectRatio (Root)

| Prop        | Type              | Default      | Description                                      |
| ----------- | ----------------- | ------------ | ------------------------------------------------ |
| `ratio`     | `number`          | `undefined`  | Aspect ratio expressed as a number (e.g., 16/9). |
| `className` | `string`          | `""`         | Additional classes applied to the container.     |
| `children`  | `React.ReactNode` | **required** | Content inside the ratio-constrained container.  |

---

## Behavior

- **Responsive**: The container scales while preserving the specified ratio.
- **Content fill**: Child content should handle its own layout (e.g., `object-cover`).
- **Styling**: Apply width/height and styling via `className`.

---

## Examples

### 16:9 Ratio

```tsx
import { AspectRatio } from "laif-ds";

export function Ratio16x9() {
  return (
    <AspectRatio
      ratio={16 / 9}
      className="bg-d-secondary/10 w-[400px] overflow-hidden rounded-md"
    >
      <div className="flex h-full items-center justify-center">
        <p className="text-d-secondary-foreground text-sm">16:9 Aspect Ratio</p>
      </div>
    </AspectRatio>
  );
}
```

### Square (1:1)

```tsx
import { AspectRatio } from "laif-ds";

export function Square() {
  return (
    <AspectRatio
      ratio={1 / 1}
      className="bg-d-secondary/10 w-[400px] overflow-hidden rounded-md"
    >
      <div className="flex h-full items-center justify-center">
        <p className="text-d-secondary-foreground text-sm">1:1 Aspect Ratio</p>
      </div>
    </AspectRatio>
  );
}
```

### With Image

```tsx
import { AspectRatio } from "laif-ds";

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

---

## Notes

- **Children**: Place any content inside; use `object-cover` for images to avoid distortion.
- **Width**: Control width via `className`; height is computed from the ratio.