AspectRatio

A wrapper that locks its child to a fixed width-to-height ratio. Useful for responsive images, videos, and media placeholders.

Features

Maintains a precise width-to-height ratio at any container size.

Built on the native CSS aspect-ratio property.

Exposes the ratio via data-ratio for styling.

Renders as a <div> — accepts any HTML attributes.

Example

1:1

16:9

4:3

Anatomy


import { AspectRatio } from '@wire-ui/react'
 
<AspectRatio ratio={16 / 9}>
<img src="/banner.jpg" alt="" />
</AspectRatio>

Styling

AspectRatio sets position: relative, width: 100%, and aspect-ratio: <ratio> inline. Children fill the box — use size-full object-cover (or equivalent) on media to crop neatly.


<AspectRatio ratio={21 / 9} className="overflow-hidden rounded-[8px]">
  <video src="/clip.mp4" className="size-full object-cover" />
</AspectRatio>

Using data attributes

AspectRatio exposes the current ratio as data-ratio. Useful for debugging or matching styles to a specific shape.


[data-ratio="1"]                  { border: 2px solid black; }
[data-ratio="1.7777777777777777"] { border: 2px solid #6b7280; }

Props

Prop	Type	Default	Description
`ratio`	`number`	`1`	Width-to-height ratio. e.g. `16/9` (≈1.777) or `1` for a square.
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	All standard HTML div attributes

Data attributes

Attribute	When present
`data-ratio`	Always — value is the numeric ratio

Accessibility

Renders a plain <div> — no inherent semantics. Apply role, aria-label, or wrap media with appropriate alt text as needed.
The wrapper does not steal focus or interaction from its children.