You can use the Media component to display images scaled to a specific aspect ratio. The default included aspect ratios are 16-9, 4-3, and 1-1. You can add more by either using the react-md-media-aspect-ratio mixin, or updating the md-media-aspect-ratios variable with additional values.

The Media component will scale to whatever the size of its container is and maintain the aspect ratio.

Something from

Non reprehenderit aliquip eiusmod elit aute ullamco non eu culpa. Magna fugiat Lorem officia dolore quis consequat proident exercitation consequat incididunt. Cillum dolor nulla incididunt culpa ut in consectetur sunt ea.

Something from

Wow. Amazing.

Dolor et commodo ipsum dolor irure eu labore minim nulla enim nostrud elit elit culpa. Cillum enim cupidatat commodo laboris consequat nostrud aute proident. Pariatur adipisicing officia pariatur amet eu. Et tempor non ad Lorem. Est magna eu amet aliquip sit proident eiusmod. Magna ipsum sunt non sunt do irure. Anim voluptate ad occaecat exercitation.

Something from

Aute eu do minim nostrud ad culpa quis non culpa eiusmod. Magna consectetur veniam deserunt cillum laboris elit ea. Adipisicing anim pariatur ullamco tempor aliqua labore. Laborum labore irure eiusmod mollit. Est pariatur eiusmod qui enim magna do tempor id irure pariatur enim reprehenderit. Quis voluptate duis amet commodo ullamco. Deserunt sunt officia nisi in elit exercitation pariatur labore veniam dolor.

By default, img, iframe, svg, video, embed, and object elements will be scaled correctly within a Media component. These defaults can be changed by updating the md-media-embedded-selectors.

The MediaOverlay component can even be used above videos, even though that might not really be the best idea.

A chemistry set with material design colors flowing into a text editor.