BalanceReckon Design System
Layout

AspectRatio

The AspectRatio primitive is used to embed responsive media like images and videos.

import { AspectRatio } from '@balance-web/aspect-ratio';
Loading demo…

The AspectRatio primitive is used to embed responsive media like images and videos.

Usage

Ratio

The aspect ratio of the box. Common values are: 1, 16/9, 4/3.

Loading demo…

Video

Here's how to embed a video that has a 16 by 9 aspect ratio.

Loading demo…

Image

Here's how to embed an image that has a 1 by 1 aspect ratio.

Loading demo…

On this page