在 Materialize 中，有哪些类可用于创建响应式图像和视频?
Materialize 库允许开发者使用预定义的 CSS 类和 JavaScript 方法进行响应式网页设计。我们可以使用 Materialize 类来自定义排版、在网页中添加网格，以及制作响应式视频和图像。
始终需要使图像和视频具有响应性，以避免它们溢出。在本教程中，我们将使用不同的 Materialize 类来实现图像和视频的响应式显示。
使用"Responsive-img"类使图像具有响应性
Materialize 的"responsive-img"类允许开发者将图像设置为响应式。它将图像的宽度设置为容器的宽度，高度设置为"自动"。因此，图像不会溢出，但在较小的屏幕上会被压缩，而在较大的屏幕上则会变得模糊。
语法
用户可以按照以下语法使用 Materialize 的"responsive-image"类，使图像具有响应式显示。
<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"类名。我们可以使用<video>标签将视频添加到网页。它将视频的宽度设置为100%，并根据视频的宽高比调整高度。
语法
用户可以按照以下语法使用"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 标签。此外，我们还在"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 视频嵌入到网页中。我们将 iframe 添加到类名为"video-container"的 div 元素中。在输出中，我们可以观察到视频的宽度为 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 的不同类来使图像和视频具有响应式功能。但是，开发人员必须专注于应该将哪个元素与特定的类名一起使用。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
