Aspect Ratio
@/components/kamod-ui/aspect-ratio
Installation
Import AspectRatio from `@/components/kamod-ui/aspect-ratio`.
pnpm add @kamod-ch/uiimport { AspectRatio } from "@/components/kamod-ui/aspect-ratio"
import { Image } from "@/components/kamod-ui/image";Usage
Pass ratio as a number (e.g. 16/9). Put the image (or video) inside and size it with h-full w-full object-cover so it fills the box.
import { AspectRatio } from "@/components/kamod-ui/aspect-ratio";<AspectRatio />Demo
Default widescreen frame with muted background and rounded corners.
Square
Use ratio={1 / 1} for square thumbnails or avatars.
Portrait
Use ratio={9 / 16} for vertical media.
API Reference
Component overview.
AspectRatio
Wrapper with CSS aspect-ratio; clip overflow. Child media should fill with h-full w-full object-cover.
| Prop | Type | Default |
|---|---|---|
| ratio | number | (required) |
| class | string | - |
| children | ComponentChildren | - |
Accessibility Notes
Use Aspect Ratio with clear labels, keyboard-friendly interactions and semantic structure.