The example below will show how you can use the
MediaContainer component to
create responsive images that are based on the current size of the
MediaContainer's width. The
MediaContainer will automatically make any:
element responsive by default.
<svg>s will only be responsive if they are a
direct child of the
MediaContainer so that you can use the
component (example below) to include SVG Icons as normal.
Sometimes it can be helpful to enforce a specific aspect ratio so that a general layout can be used even if images are different sizes. This is helpful when users can upload content without a specific resolution or when you have no control over the size of the content.
react-md creates styles for the following aspect ratios by default:
but this can be changed from by the
SCSS variable. To enforce an aspect ratio, you need to update the
MediaContainer component to just use the
width props to create
that aspect ratio.
This package also includes a component to overlay any responsive media item with an overlay that can contain text, buttons, icons, or any additional information related to your image.