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:

• <img>
• <video>
• <iframe>
• <embed>
• <object>

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 MediaOverlay 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:

• 16:9
• 4:3
• 1:1

but this can be changed from by the $rmd-media-default-aspect-ratios SCSS variable. To enforce an aspect ratio, you need to update the MediaContainer component to just use the height and 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.