在 Materialize 中创建响应式图像和视频的课程有哪些？

在本文中，我们将了解如何使用 Materialize CSS 将响应式图像和视频添加到 HTML 文件中，还将通过示例了解它们的实现。

Materialise 是一种设计语言，它结合了成功设计的经典原则以及创新和技术。 Materialize CSS 是一个流行的前端框架，它可以帮助添加高级功能，并通过从 Materialize CSS 包中导入各种类来制作响应式网站。它还有助于向网站添加响应式图像和视频。

响应性：响应性是网站的文本、图像、视频和其他元素在以不同设备宽度查看时根据屏幕大小自动调整大小的功能。我们将通过示例了解对我们网站上的图像添加响应行为。

向网站添加响应式图像：我们可以使用“responsive-img”类向我们的网站添加响应式图像。此类将使图像响应。默认情况下，它将具有“width = 100% and height = auto”。

句法：

示例：此示例说明使用 Materialize CSS 属性添加响应式图像。

HTML

  

    Materialize CSS
      
    
    
      
    
    
    

  

    Responive Image in materialize
    
        
        
            This is a sample image which has 
            been given the class "responsive-img" 
            to make it responsive in nature.
        
    

  

输出：

使用 Materialise CSS 的响应式图像

将响应视频添加到网站：我们可以使用“响应视频”类将响应视频添加到我们的网站，这将使视频响应。

句法：

在这里，我们将添加一个 YouTube 视频链接，因此我们使用带有“ video-container ”类的

标签。如果您要添加已下载到计算机的视频，则可以在这种情况下使用