数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学在Materialize中创建响应式图片和视频需要哪些类？
Materialize库允许开发者使用预定义的CSS类和JavaScript方法来创建响应式网页设计。我们可以使用Materialize类来定制排版，向网页添加网格，并创建响应式视频和图像。
为了避免图片和视频溢出，使其响应式总是必要的。在本教程中，我们将使用Materialize的不同类来创建响应式图片和视频。
使用“responsive-img”类创建响应式图像
Materialize的“responsive-img”类允许开发者创建响应式图像。它将图像的宽度设置为容器宽度，高度设置为自动。因此，图像不会溢出，但在较小的屏幕上会压缩，在较大的屏幕上可能会模糊。
语法
用户可以按照以下语法使用Materialize的“responsive-img”类来创建响应式图像。
<img class="responsive-img" src="#" >
在上面的语法中，用户可以看到我们需要将“responsive-img”类添加到“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的不同类来创建响应式图片和视频。但是，开发者必须注意应该将哪个元素与特定的类名一起使用。
浏览量：107
