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.
<ResponsiveBoxaspectWidth={700}aspectHeight={400}maxWidth={700}maxHeight={400}><Imagewidth="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.
<ResponsiveBoxaspectWidth={700}aspectHeight={400}maxWidth="100%"><Imagewidth="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.