AspectRatio · Glowup

LAYOUT · 87 / 89

AspectRatio

AspectRatio — a Material You layout component for React Native and web.

󱀫

packages/ui/src/components/Layout/AspectRatio.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

ratio 1.78

Properties

1 control

Ratio (w / h)

Usage

AspectRatio.tsx

Variants

The states and shapes this component is meant to be used in.

Ratios

16:9

4:3

1:1

As a media slot

Release banner

The box keeps its 16:9 shape whatever the width is.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

1 on AspectRatioProps

Also accepts everything from Omit<BoxProps, "height">.

ratio

number

default: 1

Width divided by height — `16 / 9`, `1`, `4 / 3`. Defaults to `1`.