W3.CSS 图像

W3.CSS 提供了一个单一的类来管理图像并使它们具有响应性。使图像响应意味着它应该根据其父元素进行缩放。也就是说，图像的大小不应溢出其父级，并且会根据其父级大小的变化而增长和缩小，而不会丢失其纵横比，而 w3-image 也是如此。

示例：向 HTML 页面添加响应式图像。

输出：

虽然它只有一个类，但它可以与其他类结合来制作各种效果，如圆边图像、带边框的图像、图像作为卡片等。要添加圆边图像，您可以使用 w3-round 或任何其他类似的班级。

示例：在 HTML 页面上添加圆角图像。

HTML

  
    
    

  

    
    
    

  
        
        
        

          Welcome To GFG
      
    
      
    
    

        
    

输出：

您还可以通过使用 w3-circle 类向图像添加圆形图像。

例子：

HTML

  

  
    
    

  

    
    
    

  
        
        
        

          Welcome To GFG
      
    
      
    
    

        
    

  

输出：

要添加带边框的图像，我们可以使用 w3-border 类。此效果还使图像具有缩略图外观。

例子：

HTML

  

  
    
    

  

    
    
    

  
        
        
        

            Welcome To GFG
        
    
      
    
    

        
    

  

输出：

您还可以通过在图像上使用 w3-card 类来将图像用作卡片。

例子：

HTML

  

  
    
    
        

  

    
    
    

  
        
        
        

          Welcome To GFG
    
      
    
    

        
    

输出：