Aspect Ratio

Usage

The ratio prop overrides the original aspect ratios of AspectRatio's child content, accepting only numeric values, not strings.

import { AspectRatio } from "@chakra-ui/react"

<AspectRatio ratio={16 / 9}>
  <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.

PreviewCode

Stackblitz

Video

Embed a video using an iframe, and use the ratio prop to override the video's original aspect ratio.

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.

Guide

Aspect Ratio Token

Chakra UI also provides predefined aspect ratio tokens out of the box, including square, landscape, portrait, wide, ultrawide, and golden that can only be used in the aspectRatio CSS prop.

<Box aspectRatio="square" />

Props

These props can be passed to the AspectRatio component.