Aspect Ratio

Used to embed responsive videos and maps, etc.

Panda

import { AspectRatio } from 'styled-system/jsx'

Usage

Image

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

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.

Props

These props can be passed to the AspectRatio component.

Prop	Type	Description
`ratio`	`ConditionalValue<number>`	The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`

On this page

Loading...

import { AspectRatio } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <AspectRatio h="315px" w="560px">
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/3De7DAcouMg?si=GimPs_G6HF59kxes"
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
      />
    </AspectRatio>
  )
}

import { DecorativeBox } from '@/app/components/decorative-box'
import { AspectRatio } from 'styled-system/jsx'

export function ResponsiveDemo() {
  return (
    <AspectRatio maxWidth="300px" ratio={{ base: 1, md: 16 / 9 }} w="full">
      <DecorativeBox>Box</DecorativeBox>
    </AspectRatio>
  )
}

import Image from 'next/image'
import { AspectRatio } from 'styled-system/jsx'

export function ImgDemo() {
  return (
    <AspectRatio h="447px" maxW="400px" ratio={4 / 3} w="794px">
      <Image
        alt="A fiery cerberus"
        src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4d7b49a9-2590-4dda-88ad-8046da56428b/dg97zza-65055527-eaf3-48e6-86aa-cf70a0880eea.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRkN2I0OWE5LTI1OTAtNGRkYS04OGFkLTgwNDZkYTU2NDI4YlwvZGc5N3p6YS02NTA1NTUyNy1lYWYzLTQ4ZTYtODZhYS1jZjcwYTA4ODBlZWEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.BT7UC12eP5ibJs6uEYPIOQNQ6Xdnvw1ttIrCEgPvcSk"
        height={447}
        width={794}
      />
    </AspectRatio>
  )
}

import { AspectRatio } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <AspectRatio h="315px" w="560px">
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/3De7DAcouMg?si=GimPs_G6HF59kxes"
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
      />
    </AspectRatio>
  )
}

import { AspectRatio } from 'styled-system/jsx'

export function MapsDemo() {
  return (
    <AspectRatio ratio={16 / 9} w="full">
      <iframe 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>
  )
}