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=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script type = "text/javascript"
src =
"https://code.jquery.com/jquery-2.1.1.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</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=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>
Output:
