ResponsiveBox

The <ResponsiveBox> component can be used to responsively scale a content area.

Responsive image

You may wish to include an image that responsively scales down with the width of the container. Try scaling the viewport smaller than the below image.

Please make sure you describe the image
<ResponsiveBox
  aspectWidth={700}
  aspectHeight={400}
  maxWidth={700}
  maxHeight={400}
>
  <Image
    width="100%"
    height="100%"
    src="https://picsum.photos/seed/hello/700/400"
    srcSet="https://picsum.photos/seed/hello/700/400 1x, https://picsum.photos/seed/hello/1400/800 2x"
    alt="Please make sure you describe the image"
  />
</ResponsiveBox>

You may wish to keep the image at 100% width, regardless of the original native width of the image.

Please make sure you describe the image
<ResponsiveBox aspectWidth={700} aspectHeight={400} maxWidth="100%">
  <Image
    width="100%"
    height="100%"
    src="https://picsum.photos/seed/hello/700/400"
    srcSet="https://picsum.photos/seed/hello/700/400 1x, https://picsum.photos/seed/hello/1400/800 2x"
    alt="Please make sure you describe the image"
  />
</ResponsiveBox>

Placeholders

Also useful when displaying fallback placeholders.

<ResponsiveBox
  aspectWidth={16}
  aspectHeight={9}
  maxWidth="100%"
  bg="black10"
/>
On this page
Responsive image
Placeholders