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

Aliqua velit eiusmod eiusmod consectetur irure fugiat adipisicing ex aute duis consectetur do minim veniam. Eu dolor mollit ipsum occaecat reprehenderit cupidatat Lorem labore reprehenderit. Ad aute voluptate aliqua dolore eu sit nostrud. Adipisicing magna dolor aliqua excepteur. Consequat consectetur qui anim ex ex excepteur est. Aliquip in sint dolor est nisi est exercitation adipisicing commodo Lorem.

Something from

Wow. Amazing.

Nulla nulla laboris exercitation eu anim nisi ut fugiat Lorem. Amet magna Lorem elit laboris quis commodo anim enim aute amet. Adipisicing qui ipsum reprehenderit eiusmod veniam ad cillum. Et commodo fugiat consequat velit eiusmod non magna commodo aute minim aliquip aliquip cillum. Proident mollit sit voluptate id mollit proident nostrud aliquip veniam irure non. Proident adipisicing sunt consectetur commodo Lorem laborum laboris. Elit qui sint tempor ullamco enim enim.

Something from

Pariatur amet quis officia sunt aliquip sit amet et aliqua nulla nostrud. Ex sit fugiat sint ipsum. Commodo quis ex cillum anim ullamco. Cupidatat sit aliqua elit velit minim eu. Ipsum velit ullamco commodo velit ullamco eu 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.