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-solid";

<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

Chakra’s version of this example uses its Image component, which has not shipped here yet, so the img is reached through Box’s render prop.

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.

The responsive value is the aspectRatio style prop here, not AspectRatio’s ratio prop. ratio is an arbitrary number, so it rides an inline CSS custom property that a static rule reads back — and an inline style has no breakpoints. ratio={{ base: 1, md: 16 / 9 }} is a type error rather than a prop that silently does nothing.

Guide

Aspect Ratio Token

chakra-ui-solid 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.

They cannot be used with the ratio prop that AspectRatio accepts.

<Box aspectRatio="square" />

Props

These props can be passed to the AspectRatio component.