Docs/AspectRatio

AspectRatio

Maintains a fixed aspect ratio for its content. Useful for images, videos, and embeds.

Usage

tsx

1import { AspectRatio } from '@storm-ds/ui'
2
3<AspectRatio ratio={16/9}>
4  <img src="/photo.jpg" alt="Photo" className="object-cover w-full h-full" />
5</AspectRatio>

16:9

Props

Prop	Type	Default	Description
ratio	number	16/9	Width/height ratio (e.g. 16/9, 4/3, 1)
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's AspectRatio. Import: `import { AspectRatio } from '@storm-ds/ui'`. Wraps content in a container with fixed aspect ratio. Use `ratio` prop (number, e.g. 16/9, 4/3, 1). Children fill the container absolutely. Server component compatible. Example: `<AspectRatio ratio={16/9}><img src="/photo.jpg" className="object-cover w-full h-full" /></AspectRatio>`

ScrollArea

Resizable