Aspect Ratio

Used to embed responsive videos and maps, etc.

Import

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

Loading example...

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

Loading example...

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

Failed to load code file: components/aspect-ratio/video.demo.tsx

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

Loading example...

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

Loading example...

These props can be passed to the AspectRatio component in addition to style and factory props.

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

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

Loading example...

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

Loading example...

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

Failed to load code file: components/aspect-ratio/video.demo.tsx

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

Loading example...

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

Box

Loading example...

These props can be passed to the AspectRatio component in addition to style and factory props.

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`