Aspect Ratio

Reserve predictable media geometry without prescribing its content.

View source Explore Storybook

Interactive preview

Live specimenTry the component

16:9

1:1

4:3

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add aspect-ratio

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<AspectRatio ratio={16 / 9}>
  <img src="/project-preview.jpg" alt="Project settings preview" />
</AspectRatio>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`ratio`	`positive finite number`	`16 / 9`
`children / style`	`Native div content / CSSProperties`	`—`

Accessibility

The wrapper is presentational and forwards native div attributes/ref. Give images meaningful alt, video captions, and embeds an accessible title. Invalid ratios fall back to 16:9. The component uses native CSS aspect-ratio and object-fit for direct image/video children; explicit heights or padding can override the resulting geometry. It clips overflow, so keep focusable overlay controls inside its visible bounds.