Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Aspect Ratio

Used to embed responsive videos and maps, etc

SourceStorybook
2 / 1

Usage

import { AspectRatio } from "@chakra-ui/react"
<AspectRatio>
  <iframe
    title="naruto"
    src="https://www.youtube.com/embed/QhBnZ6NPOY0"
    allowFullScreen
  />
</AspectRatio>

Examples

Image

Here's how to embed an image that has a 4 by 3 aspect ratio.

naruto

Video

To embed a video with a specific aspect ratio, use an iframe with src pointing to the link of the video.

Google Map

Here's how to embed a responsive Google map using AspectRatio.

Responsive

Here's an example of applying a responsive aspect ratio to a box.

Box

Props

These props can be passed to the AspectRatio component.

PropDefaultType
ratio
ConditionalValue<number>

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

Previous

Server Component

Next

Bleed