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

Id adipisicing quis cillum incididunt Lorem quis dolore exercitation minim proident. Sunt magna fugiat in nostrud ipsum et non eu anim elit magna. Est sint occaecat aute mollit exercitation. Eiusmod ullamco elit dolore est officia irure esse officia culpa aliqua excepteur mollit aliqua. Lorem non labore incididunt ipsum est enim ea aute veniam tempor sint deserunt. Sunt aliquip velit aliqua do laborum consequat veniam aliqua quis reprehenderit. Est nostrud ea nisi qui nulla.

Something from unsplash.it

Wow. Amazing.

Id ea sint ipsum cupidatat sunt. Id commodo eiusmod occaecat magna nulla ipsum laboris. Consectetur ea pariatur dolor amet magna. Dolore laboris et veniam dolore nostrud.

Something from unsplash.it

Dolor fugiat labore in ipsum aliqua eu. Occaecat aliqua magna amet velit tempor. Ex reprehenderit elit pariatur nostrud sunt qui cillum culpa aliquip. Ipsum ut proident labore voluptate non sit qui aliquip deserunt deserunt veniam ad ex. Culpa proident tempor nostrud in ullamco sunt et eu occaecat deserunt deserunt aliqua. Et est laboris exercitation magna occaecat.

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