Skip to main content

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

Description

The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`

Type
ResponsiveValue<number>