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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  <head>
    <!--Import Google Icon Font-->
    <link href=
          rel="stylesheet">
     
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type = "text/javascript"  
         src
</script>  
           
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"/>
  </head>
  
  <body>
      <div>
          <h3>Responsive Image</h3>
        <img class="responsive-img" 
             src="geeksforgeeks-6.png">
      </div>
       
    <div class="col s12 m8 offset-m2 l6 offset-l3">
        <h3>Circular Image</h3>
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="download.jpg" 
                   class="circle responsive-img"
               <!-- notice the "circle" class -->
            </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>
              
     <!-- Compiled and minified JavaScript -->
     <script src=
    </script>
  </body>
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href=
        rel="stylesheet">
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" 
    </script>
  
    <!--Let browser know website 
        is optimized for mobile-->
    <meta name="viewport" content=
                    "width=device-width,
                    initial-scale=1.0" />
</head>
  
<body>
    <div>
        <h3>Responsive Embeds</h3>
        <div class="video-container">
            <iframe width="853" height="480" 
src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
                frameborder="0"
                allowfullscreen>
            </iframe>
        </div>
    </div>
  
  
    <div class="card-panel">
        <h3>responsive Videos</h3>
        <video class="responsive-video"
            controls>
            <source src=
"WhatsApp Video 2020-06-02 at 13.23.30.mp4"
            type="video/mp4">
        </video>
    </div>
  
  
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
  
</html>

chevron_right


Output:





My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.