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

Pariatur irure aliquip excepteur excepteur dolor. Adipisicing Lorem ut proident ex laboris consequat velit. Laborum duis do veniam exercitation.

Something from unsplash.it

Wow. Amazing.

Esse consequat minim sint excepteur eiusmod elit voluptate nostrud nisi quis. Sunt quis duis amet officia duis et anim laboris consequat. Sit Lorem amet id occaecat. Do ad velit labore sunt.

Something from unsplash.it

Occaecat anim consequat dolore et laboris do incididunt officia culpa. Enim irure enim et proident adipisicing ut magna dolore ea ad. Ad nisi minim Lorem amet sunt tempor eu proident amet dolor aute ullamco veniam. Est esse mollit elit excepteur deserunt dolore aute.

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