How To Use Materialize CSS Media?

Materialize CSS Media

Materialize CSS Media provides different classes that are used to make images and videos responsive with respect to different viewport widths.

Materialize CSS Media provides different classes that are used to create an image and video responsive.

Media Classes:

• .responsive-img − Used to make images responsive.
• .video-container − used to make embedded videos responsive.
• .responsive-video-used to make HTML5 videos responsive.

Responsive Images

To make responsive images, assign .responsive-img to the <img> element base class. It sets max-width: 100% and height: auto for the image.

General Syntax

<img class="responsive-img" src="cool_pic.jpg" alt="responsive image">

Circular images

To make circular image assign, .circle and to make it responsive assign an alternative class .img-responsive to the <img> element base class.

General Syntax

<img src="../images/materialize-circle.jpg" class="responsive-img circle" alt="Image Circle">

To read more about Materialize CSS Media, click here.