# Aspect Ratio

- Page: <https://kznlabs.github.io/labsUI/components/aspect-ratio>

## Aspect Ratio (`aspect-ratio`, component)

Server-safe box locked to a ratio (16:9 thumbnails, 9:16 clips). A direct image or video child fills it with object-cover.

- Install: `npx @kznlabs/labsui add aspect-ratio`
- Docs: <https://kznlabs.github.io/labsUI/components/aspect-ratio>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<AspectRatio>` (+ <div> props): Box locked to a ratio. A direct `<img>` or `<video>` child fills it (object-cover).
  - `ratio?: number` = `16 / 9`: Width / height, e.g. `16 / 9`, `1`, `9 / 16`.

### Usage

```tsx
<AspectRatio ratio={9 / 16} className="rounded-xl"><img src={clip.thumb} alt={clip.title} /></AspectRatio>
```

### Example: clip-thumb.tsx

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

export function ClipThumb({ src, title }: { src: string; title: string }) {
  return (
    <AspectRatio ratio={9 / 16} className="w-40 rounded-xl border">
      <img src={src} alt={title} />
    </AspectRatio>
  );
}
```