Aspect Ratio

Used to embed responsive videos and maps, etc.

Panda

Usage

import { AspectRatio } from "styled-system/jsx";

<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.

import { AspectRatio } from "styled-system/jsx";

const Demo = () => {
  return (
    <AspectRatio maxW="400px" ratio={4 / 3}>
      <img src="https://bit.ly/naruto-sage" alt="naruto" />
    </AspectRatio>
  )
}

Video

To embed a video with a specific aspect ratio, use an iframe with src pointing to the link of the video.

import { AspectRatio } from "styled-system/jsx";

const Demo = () => {
  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 "styled-system/jsx";

const Demo = () => {
  return (
    <AspectRatio ratio={16 / 9}>
      <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>
  )
}

Responsive

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

import { AspectRatio } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const AspectRatioResponsive = () => (
  <AspectRatio maxWidth="300px" ratio={{ base: 1, md: 16 / 9 }}>
    <DecorativeBox>Box</DecorativeBox>
  </AspectRatio>
)

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

Edit this page on Github

Usage

import { AspectRatio } from "styled-system/jsx";

<AspectRatio>
  <iframe
    title="naruto"
    src="https://www.youtube.com/embed/QhBnZ6NPOY0"
    allowFullScreen
  />
</AspectRatio>

Examples

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

import { AspectRatio } from "styled-system/jsx";

const Demo = () => {
  return (
    <AspectRatio maxW="400px" ratio={4 / 3}>
      <img src="https://bit.ly/naruto-sage" alt="naruto" />
    </AspectRatio>
  )
}

To embed a video with a specific aspect ratio, use an iframe with src pointing to the link of the video.

import { AspectRatio } from "styled-system/jsx";

const Demo = () => {
  return (
    <AspectRatio maxW="560px" ratio={1}>
      <iframe
        title="naruto"
        src="https://www.youtube.com/embed/QhBnZ6NPOY0"
        allowFullScreen
      />
    </AspectRatio>
  )
}

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

import { AspectRatio } from "styled-system/jsx";

const Demo = () => {
  return (
    <AspectRatio ratio={16 / 9}>
      <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>
  )
}

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

import { AspectRatio } from "styled-system/jsx"
import { DecorativeBox } from "compositions/lib/decorative-box"

export const AspectRatioResponsive = () => (
  <AspectRatio maxWidth="300px" ratio={{ base: 1, md: 16 / 9 }}>
    <DecorativeBox>Box</DecorativeBox>
  </AspectRatio>
)

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