Materialize CSS Media

Various classes are provided by materialize CSS to make media responsive.

Images: Images can be styled in following ways:

Responsive Images: To make images responsive to page width, responsive-img  class is added with image tag.

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

Circular Images: To make image look circular, circle class is added with image tag.

<div class="col s12 m8 offset-m2 l6 offset-l3">
 <div class="card-panel grey lighten-5 z-depth-1">
 <div class="row valign-wrapper">
 <div class="col s2">
 <img src="image.jpg" 
 class="circle responsive-img"> 
 </div>
 <div class="col s10">
 <span class="black-text">
 This is a square image, "circle"
 class is added to it to make it
 appear circular.
 </span>
 </div>
 </div>
 </div>
</div>

Example:

Output:

Video: Materialize CSS provides a container for Embedded Videos that resize responsively.

Responsive Embeds: To make embeds responsive, merely wrap them within div which has the class video-container.

<div class="video-container">
 <iframe width="853" height="480" 
 src="//www.youtube.com" 
 frameborder="0"
 allowfullscreen>
 </iframe>
</div>

Responsive Videos: To make HTML5 Videos responsive just add the class responsive-video to the video tag.

<video class="responsive-video" controls>
 <source src="video.mp4" type="video/mp4">
</video>

Example:

Output: