极客笔记用Materialize创建响应式图片和视频的类是什么
Materialize库允许开发人员使用预定义的CSS类和JavaScript方法来实现响应式网页设计。我们可以使用Materialize类来自定义排版，添加网格到网页，并使视频和图片响应式。
始终需要使图片和视频响应式以避免溢出。在本教程中，我们将使用Materialize的不同类来使图片和视频响应式。
使用’responsive-img’类来使图片响应式
Materialize的’responsive-img’类允许开发人员使图片响应式。它将图片的宽度设置为容器宽度，高度设置为自动。因此，在较小的屏幕上，图片不会溢出，而在较大的屏幕上会被压缩或模糊。
语法
用户可以按照以下语法来使用Materialize的’responsive-img’类来使图片响应式。
<img class="responsive-img" src="#" >
在上述语法中，用户可以看到我们需要对“img”元素本身添加一个“responsive-img”类。
示例1
在下面的示例中，我们创建了“container” div 元素。在“container” div 元素中，我们添加了图片和文本。
在 CSS 中，我们将容器的宽度设置为60%。同时，我们还设置了文本和图片的宽度。在输出中，用户可以观察到图片的尺寸根据屏幕尺寸而变化。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
<style>
.container {
width: 60%;
display: flex;
font-size: 2rem;
}
.text {width: 60%;}
.img {width: 40%;}
</style>
</head>
<body>
<h3> Using the <i> 'responsive-img' </i> class of Materialize to make image responsive </h3>
<div class = "container">
<div class = "img">
<img class = "responsive-img" src = "https://wallpaperaccess.com/full/968120.jpg" alt = "nature image">
</div>
<p class = "text"> Let's start to learn the Materialize. </p>
</div>
</body>
</html>
示例2
在下面的示例中，我们使用了’circle’类来制作一个圆形图片。而且，我们在图片元素中使用了’responsive-img’类，并将其添加到’container’元素中。
在输出中，我们可以看到圆形图片根据屏幕大小进行响应式调整。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
<style>
.container {width: 40%;}
</style>
</head>
<body>
<h4> Using the <i> 'responsive-img' </i> class of Materialize to make image responsive </h4>
<div class = "container ">
<img class = "circle responsive-img" src = "https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" alt = "Nature image">
</div>
</body>
</html>
使用“responsive-video”类来使视频具有响应性
当我们需要使视频具有响应性时，可以使用“responsive-video”类名。我们可以使用
语法
用户可以按照下面的语法使用“responsive-video”类名来使视频具有响应性。
<video class="responsive-video" style="width: 100%" controls>
<source src="testVideo.mp4" type="video/mp4">
</video>
在上面的语法中，我们使用了带有“responsive-video”类名的“video”HTML标签。
示例3
在下面的示例中，我们添加了带有“responsive-video”类名的视频标签。同时，我们在“video”元素内部添加了“source”标签。用户可以将视频URL作为“src”属性的值添加进去，并观察视频的响应式效果。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the <i> 'responsive-video' </i> class of Materialize to make embeded videos responsive </h4>
<video class = "responsive-video" style = "width: 100%" controls>
<source src = "testVideo.mp4" type = "video/mp4">
</video>
</body>
</html>
使用‘Video-container’类使视频响应式
我们可以使用“video-container”类名以及包含iframe的容器来嵌入视频。基本上，它用于嵌入式视频。它还根据视频的宽高比设置宽度和高度与容器元素的宽度相等。
语法
用户可以按照下面的语法来使用‘video-container’类使视频响应式。
<div class="video-container">
<!—add iframe here -->
</div>
在上面的语法中，我们将“video-container”类名添加到iframe的父元素中。
示例4
在下面的示例中，我们使用iframe将YouTube视频嵌入到网页中。我们在具有类名“video-container”的div元素中添加了iframe。在输出中，我们可以观察到视频的宽度为100％，并根据屏幕大小进行变化。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script>
</head>
<body>
<h4> Using the <i> 'video-container' </i> class of Materialize to make embeded videos responsive </h4>
<div class = "video-container">
<iframe src="https://www.youtube.com/embed/qZOlCFincuU"
title = "Welcome To Tutorialspoint - Simply Easy Learning" frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen> </iframe>
</div>
</body>
</html>
用户学会了使用Materialize的不同类别来使图像和视频具有响应式。然而，开发者必须关注他们应该使用哪个元素与特定的类名。