Aspect Ratio

Keeps content at a fixed width-to-height ratio as the width changes, for images, video and maps.

Stable

Web

iOS

Android

@advui/core

Source

Image

Preview

Code

The photo stays 16:9 at any width.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { AspectRatio } from '@advui/core'

<AspectRatio ratio={16 / 9} borderRadius="lg">
  <Image source={{ uri }} style={{ width: '100%', height: '100%' }} accessibilityLabel="…" />
</AspectRatio>

Examples

Common ratios

Preview

Code

1:1

4:3

16:9

API reference

AspectRatio

Prop	Type	Default	Description
`ratio`	`number`	`1`	Width divided by height, e.g. `16 / 9`.
`children`	`ReactNode`	—	Content that fills the box: 100% width and height, or absolutely positioned.

Accessibility

A plain layout box with no role. Give images inside it a text alternative (alt on web, accessibilityLabel on native).

Responsive behavior

It is 100% wide by default, so its height follows the width at every breakpoint.

Platform notes

Web

Uses the CSS aspect-ratio property.

iOS

Uses the React Native aspectRatio style.