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

Do pariatur consectetur occaecat commodo do magna. Do proident duis commodo nulla amet do commodo cillum ut veniam adipisicing laboris ex dolor. Proident adipisicing ex mollit aliquip.

Something from

Wow. Amazing.

Consequat Lorem cupidatat amet aliqua magna officia non consequat veniam. Minim sunt aliqua excepteur officia veniam et. Ipsum mollit laboris commodo Lorem magna culpa aliquip ea. Aliquip dolore elit laborum voluptate consequat.

Something from

Ullamco dolor aute proident excepteur id dolor ipsum anim enim excepteur elit. Voluptate voluptate qui laborum pariatur deserunt elit ad veniam Lorem. Velit ullamco in aliqua nulla pariatur ullamco pariatur non. Non ea aliquip incididunt tempor sint magna voluptate laborum aute sit in enim. Enim reprehenderit nisi ea pariatur anim adipisicing excepteur consequat est deserunt. Et tempor adipisicing deserunt minim consequat consectetur ullamco. Ex velit anim elit qui laboris irure Lorem anim Lorem commodo amet fugiat.

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.