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:
<!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 >
|
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:
<!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 >
|
Output: