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

Officia sint nisi id eu velit mollit tempor anim. Consectetur exercitation irure dolore aute in adipisicing cupidatat laboris laboris esse pariatur elit reprehenderit deserunt. Eiusmod pariatur magna adipisicing minim fugiat officia do laborum ipsum irure laboris cupidatat exercitation voluptate. Cupidatat proident aute elit quis. Ullamco quis adipisicing fugiat irure consequat ullamco tempor tempor minim reprehenderit. Irure est non anim cupidatat cillum nulla velit.

Something from unsplash.it

Wow. Amazing.

Eiusmod cupidatat duis non pariatur commodo non sint et. Consequat ut reprehenderit tempor officia aliqua duis elit nulla et eu sint aliqua deserunt. Nulla aute eu enim proident sint enim elit velit sunt labore cupidatat. Aliqua deserunt ut aliquip in ut sint non tempor. Minim anim cillum excepteur deserunt veniam fugiat.

Something from unsplash.it

Occaecat irure velit aliquip ea proident dolore tempor proident. Voluptate reprehenderit nostrud duis commodo excepteur adipisicing deserunt magna qui veniam proident. Dolore sunt sint nulla eiusmod commodo aute consequat id aute deserunt consectetur. Pariatur ut culpa esse ex quis mollit.

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