The AspectRatio primitive is used to embed responsive media like images and videos.
Usage
Ratio
The aspect ratio of the box. Common values are: 1, 16/9, 4/3.
<AspectRatio ratio={4 / 3}>
<Box background="dim" />
</AspectRatio>
Video
Here's how to embed a video that has a 16 by 9 aspect ratio.
<AspectRatio ratio={16 / 9}>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/GdF8wZGQrHY"
title="Reckon makes your payroll dreams come true"
frameborder="0"
/>
</AspectRatio>
Image
Here's how to embed an image that has a 1 by 1 aspect ratio.
<AspectRatio ratio={1}>
<img
alt="Young Yoda with caption 'pre-tax. Old Yoda with caption 'post-tax'."
width="640"
height="640"
src="https://pbs.twimg.com/media/E7bqDmEUcA4p9XL?format=jpg"
/>
</AspectRatio>
