Aspect Ratio

Maintain a consistent aspect ratio for embedding videos, images, maps, etc.

Source: packages/chakra-ui-solid/src/components/aspect-ratioChakra UI ↗

16 / 9

import { AspectRatio, Center } from "chakra-ui-solid";

export default function AspectRatioBasic() {
  return (
    <AspectRatio bg="bg.muted" ratio={16 / 9}>
      <Center fontSize="xl">16 / 9</Center>
    </AspectRatio>
  );
}

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.

import type { JSX } from "@solidjs/web";
import { AspectRatio, Box } from "chakra-ui-solid";

export default function AspectRatioWithImage() {
  return (
    <AspectRatio maxW="400px" ratio={4 / 3}>
      <Box
        objectFit="cover"
        render={(props) => (
          <img
            {...(props as JSX.ImgHTMLAttributes<HTMLImageElement>)}
            src="https://bit.ly/naruto-sage"
            alt="naruto"
          />
        )}
      />
    </AspectRatio>
  );
}

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.

import { AspectRatio } from "chakra-ui-solid";

export default function AspectRatioWithVideo() {
  return (
    <AspectRatio maxW="560px" ratio={1}>
      <iframe title="naruto" src="https://www.youtube.com/embed/QhBnZ6NPOY0" allowfullscreen />
    </AspectRatio>
  );
}

Google Map

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

import { AspectRatio } from "chakra-ui-solid";

export default function AspectRatioWithMap() {
  return (
    <AspectRatio ratio={16 / 9}>
      <iframe
        title="Map of Lagos"
        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>
  );
}

Responsive

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

Box

import { DecorativeBox } from "../components/decorative-box";

export default function AspectRatioResponsive() {
  return (
    <DecorativeBox maxWidth="300px" aspectRatio={{ base: 1, md: 16 / 9 }}>
      Box
    </DecorativeBox>
  );
}

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.

Prop	Default	Type
`ratio`	`4 / 3`	`number` Width over height — `16 / 9`, `4 / 3`, `1`.
`as`	—	`ValidComponent` The element or component to render instead of the default one.
`render`	—	`(props) => JSX.Element` Render an element of your own, given the computed props. A function, never an element — Solid has no `cloneElement`, so an element could only be rendered with its props dropped.
`unstyled`	—	`boolean` Drop the component's own styles. Style props and the `css` prop still apply — the opt-out is of the theme, not of styling.

Plus everything it inherits: Omit<HTMLChakraProps<"div">, "aspectRatio">. Those are the whole style-prop surface and the DOM attributes of the element it renders — several hundred names, listed here as their sources rather than expanded.