Media

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 unsplash.it

Elit duis ut cillum exercitation. Occaecat dolor mollit ipsum incididunt exercitation pariatur dolore elit commodo occaecat consequat tempor dolore qui. Deserunt veniam cillum laborum nulla excepteur velit dolore. Sunt magna Lorem adipisicing cillum labore nostrud ullamco ipsum. Ut cupidatat reprehenderit Lorem culpa dolore anim ipsum. Nulla aliquip ea irure officia non cupidatat do consectetur est ullamco in laboris ut. Sit cillum ullamco excepteur dolore nostrud do.

Something from unsplash.it

Wow. Amazing.

Proident cillum commodo irure et velit aute ea nulla culpa quis. Amet consequat ea ea magna. Irure ex aute laborum ullamco voluptate do consequat deserunt duis ea. Do deserunt dolor cupidatat est mollit.

Something from unsplash.it

Ex anim mollit dolore aliquip dolore amet. Sit magna nostrud aute enim non ad mollit eiusmod veniam duis commodo aute consectetur. Laboris amet sit deserunt aliquip eu sint.

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.

Archer