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.
<AspectRatio ratio={16 / 9}>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.952912260219!2d3.375295414770757!3d6.5276316452784755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b8b2ae68280c1%3A0xdc9e87a367c3d9cb!2sLagos!5e0!3m2!1sen!2sng!4v1567723392506!5m2!1sen!2sng" />
</AspectRatio>
Props
ratio
ratio
Description
The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`
Type
ResponsiveValue<number>