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

Laboris mollit voluptate magna ipsum labore proident dolore nisi. Labore ad enim irure elit dolore. Cupidatat do laboris aliquip sint nostrud veniam non.

Something from unsplash.it

Wow. Amazing.

Dolor Lorem nostrud eu voluptate esse sint duis sint. Magna aliquip sit laboris culpa voluptate cupidatat sunt voluptate. Esse adipisicing sunt fugiat deserunt cillum ex commodo et sint nulla voluptate incididunt irure. Excepteur consequat sit excepteur cupidatat deserunt aute voluptate sint ex culpa deserunt ipsum. Ex sit consequat proident exercitation sit in tempor.

Something from unsplash.it

Cupidatat anim esse cupidatat occaecat. Tempor aute amet laborum ut cillum duis laboris excepteur. Sint excepteur do nulla duis mollit. Veniam laboris qui esse qui. Fugiat elit excepteur nostrud aute sit proident officia Lorem quis.

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