Aspect Ratio
Displays content within a desired ratio.
Import#
import { AspectRatio } from '@volue/wave-react';
Background#
Use Aspect Ratio to draw a rectangle, based on a given aspect ratio, and fluidly constrain a child element within it. The child element will adapt to different screen dimensions, while also maintaining the specified aspect ratio.
Examples#
Ratios#
AspectRatio takes a ratio expression, like 4 / 3.
With image#
API Reference#
Prop | Type | Default |
|---|---|---|
as | enum | div |
css | StitchesCss | No default value |
ratio | number | 1 |