The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`
Aspect Ratio
AspectRatio component is used to embed responsive videos and maps, etc.
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.
Embed Image#
Here's how to embed an image that has a 4 by 3 aspect ratio.
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.
Props#
ratio
ratio
Description
Type
ResponsiveValue<number>