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] rounded-md overflow-hidden">
      <div className="flex h-full items-center justify-center">
        <p className="text-sm text-d-secondary-foreground">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] rounded-md overflow-hidden">
      <div className="flex h-full items-center justify-center">
        <p className="text-sm text-d-secondary-foreground">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] rounded-md overflow-hidden">
       <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.