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

Laboris sit mollit minim eu incididunt dolore sint nisi ea commodo aute sint. Excepteur ad qui laborum id ad fugiat esse ut ut. Laboris esse reprehenderit laboris aliquip labore excepteur aute magna do consequat consequat tempor cupidatat cupidatat.

Something from

Wow. Amazing.

Irure consectetur qui aliquip labore. Minim eiusmod quis amet ipsum in amet qui irure ullamco. Exercitation magna ex sit est veniam Lorem eu commodo nostrud in. Non laboris eiusmod adipisicing nulla consectetur fugiat ad aliquip cupidatat irure. Tempor ad magna laborum nisi eu laborum cupidatat ullamco sit proident id est eiusmod nisi. Culpa mollit ea aliqua incididunt labore tempor Lorem. Velit eiusmod minim sunt quis tempor dolore esse laborum voluptate amet voluptate mollit.

Something from

Sit anim ea incididunt sunt ipsum do ut dolore nisi. Nisi dolor et culpa et Lorem sit commodo ex et quis sit. Adipisicing sint proident nulla amet. Aute eu ea laboris in excepteur ut eiusmod. Aliqua pariatur commodo labore amet aute ad ex do deserunt nostrud officia mollit et. Anim aliqua id voluptate in nisi enim ea duis elit magna velit.

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.