Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
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> | undefined

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

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.

Previous

Testing

Next

Bleed