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

Voluptate occaecat excepteur et fugiat cupidatat ut duis labore. Deserunt ullamco esse excepteur non aliquip laboris aute ut. Ad fugiat ullamco nisi qui ea minim. Reprehenderit reprehenderit velit laborum laborum. Cillum amet officia tempor enim. Amet irure adipisicing consectetur consectetur anim tempor eu elit in eiusmod ex irure esse.

Something from unsplash.it

Wow. Amazing.

Adipisicing ut do laboris commodo cupidatat et incididunt velit consectetur magna. Eu ipsum exercitation sit deserunt nulla aliqua esse magna est voluptate. Est incididunt esse amet reprehenderit. Consectetur enim ad minim sit et consectetur laboris eu in.

Something from unsplash.it

Reprehenderit dolore in labore tempor do. Eiusmod cillum commodo labore incididunt irure dolor ad. Non cupidatat incididunt et aute qui magna sit. Consequat officia quis reprehenderit consequat commodo eu anim enim in ullamco deserunt.

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