Aspect Ratio
AspectRatio component is used to embed responsive videos and maps, etc. It uses a very common padding hack to achieve this.
Import#
import { AspectRatio } from "@chakra-ui/react"
Embed Video#
To embed a video with a specific aspect ratio, use an iframe with src pointing
to the link of the video.
Pass the maxWidth prop to AspectRatio to control the width of the content.
Editable Example
Embed Image#
Here's how to embed an image that has a 4 by 3 aspect ratio.
Editable Example
Embed a map#
Here's how to embed a responsive Google map using AspectRatio. To make the map
take up the entire width, we can ignore the maxWidth prop.
Editable Example
Props#
| Name | Type | Description | Default |
|---|---|---|---|
| ratio | number | ResponsiveArray<number> | Partial<Record<string, number>> | The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1` | - |