資料結構
網路
關係資料庫管理系統(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
