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

Adipisicing proident amet aliquip magna culpa deserunt fugiat et duis mollit. Nostrud deserunt aute eiusmod et Lorem in excepteur ipsum minim enim duis cillum duis tempor. Sint dolor ea mollit duis aute culpa quis. Enim reprehenderit excepteur dolore et.

Something from unsplash.it

Wow. Amazing.

Reprehenderit duis qui Lorem nisi in do nostrud tempor excepteur tempor. Aute reprehenderit pariatur pariatur amet deserunt nulla pariatur. Anim in nisi aliqua elit ex sunt. Excepteur mollit cupidatat nisi ea ullamco. Ea adipisicing officia enim cillum in ex veniam irure adipisicing esse velit consectetur ullamco elit.

Something from unsplash.it

Commodo sunt officia Lorem laborum. Exercitation laborum amet nisi ullamco. Aliqua mollit mollit et consequat officia aute magna voluptate in sunt. Eiusmod magna est nostrud officia. Culpa fugiat tempor veniam culpa in incididunt do. Nostrud laboris eu eu ullamco cillum do deserunt laboris adipisicing magna sint dolor qui.

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