Aspect Ratio

Installation

Usage

Imports

Code

How Radix Aspect Ratio Works

The AspectRatio component ensures that the height is always calculated from the width, keeping the specified ratio intact. If you apply a fixed height, the component can’t maintain the ratio as intended.

If you need a fixed height, simply avoid using AspectRatio. Set the height directly and let the width adjust normally.

Examples

Ratio - 9:16

Ratio - 4:3

Ratio - 1:1

Props