Aspect Ratio

Constrains its content to a fixed width-to-height ratio, so media keeps a consistent shape regardless of its own dimensions.

Source Storybook Accessibility

16 / 9

Usage#

import { AspectRatio } from "neelam-ui";
 
<AspectRatio ratio={16 / 9}>
  <img
    src="/cover.jpg"
    alt="Sunrise over the harbour"
    className="absolute inset-0 h-full w-full object-cover"
  />
</AspectRatio>

ratio is a plain number — 16 / 9, 4 / 3, 1 (the default, square). The wrapper is relative with overflow-hidden, so fill your media with absolute inset-0 h-full w-full object-cover, the same technique Avatar uses inside its own fixed-size box.

Why inline style#

The ratio is applied through the native CSS aspect-ratio property in an inline style, not a Tailwind aspect-[…] class. A caller-supplied continuous value — any ratio, not a fixed set of variants — is exactly what style is for, the same reason Progress's fill width is set inline rather than picked from preset classes.

Written as “<ratio> / 1”, not a bare number

jsdom rejects a plain unitless number for aspect-ratio and silently drops the whole declaration, even though real browsers accept it. Writing the same ratio as "1.777… / 1" is a form both accept — which is what keeps this component's own tests meaningful.

Keyboard#

Keyboard shortcuts
Key	Behaviour
`Tab`	Not focusable. It is a layout wrapper — anything interactive inside keeps its own tab stop.

Accessibility#

A plain <div> with no role. It constrains layout and says nothing about content, which is correct.
It does not touch the alt text of media inside it. A decorative image still needs alt=""; a meaningful one still needs a real description.
overflow-hidden means object-cover will crop. Check that nothing essential — a face, text baked into an image — sits near an edge at the ratio you pick.

API reference#

Props for AspectRatio
Prop	Type	Default
`ratio` Width-to-height ratio, e.g. `16 / 9` or `4 / 3`. Defaults to `1` (square).	`number`	`1`

Also accepts every native <div> attribute. A style you pass is merged after the ratio, so you can override it.