PRIMITIVES

AspectRatio

Locks a child element to a specific width-to-height ratio. Composes the Radix @radix-ui/react-aspect-ratio primitive — the wrapper guarantees no layout shift while the image / video / iframe loads.

Import

import { AspectRatio } from 'damo-ui'

16:9 image

16 : 9
1<AspectRatio ratio={16 / 9}>
2  <img src="/cover.jpg" alt="" className="h-full w-full object-cover" />
3</AspectRatio>

Square (1:1)

1 : 1
1<AspectRatio ratio={1}>
2  <Avatar size="full" />
3</AspectRatio>

Props

AspectRatio props
PropTypeDefaultDescription
rationumber1Width-to-height ratio (e.g. 16 / 9, 4 / 3, 1 for a square). The child element is forced to fill the box.
childrenReactNode—Pass a single element that should fill the aspect-ratio container.
classNamestring—Tailwind classes are merged on top of the wrapper.

Common ratios

  • 16 / 9 — widescreen video, hero banners
  • 4 / 3 — legacy media, photo galleries
  • 1 — square thumbnails, avatars
  • 3 / 4 — portrait photo
  • 21 / 9 — ultra-wide hero
← ContainerScrollArea →