📜  语义 UI 图像类型

📅  最后修改于: 2022-05-13 01:56:14.182000             🧑  作者: Mango

语义 UI 图像类型

Semantic UI是一个开源框架,它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同,并且具有各种不同的元素可用于使您的网站看起来更神奇。语义 UI 为我们提供了一种非常简单的方式来设置图像样式。它提供不同类型的图像,例如普通图像和图像链接。它还为我们提供了不同的状态,如隐藏、可见,以及不同的变化和状态。

在本文中,我们将使用示例代码了解语义 UI 图像类型及其实现。

语义 UI 图像类型:

1. 图像:用于在文档中插入普通图像。图像通常采用容器的形状,但如果给出特定尺寸,图像将采用指定的尺寸。

句法:

示例 1:

HTML


  

    Semantic-UI Image Types
    
    
    

  

    
        

Geeksforgeeks

        Semantic-UI Image Types

        
                     
    
  


HTML


  

    Semantic-UI Image Types
    
    
    

  

    
        

Geeksforgeeks

        Semantic-UI Image Types

        
                                                   
    
  


HTML


  

    Semantic-UI Image Types
    
    
    

  

    
        

Geeksforgeeks

        Semantic-UI Image Types

             
  


HTML


  

    Semantic-UI Image Types
    
    
    

  

    
        
            

Geeksforgeeks

            Semantic-UI Image Types

                                                   
    
  


输出:

示例 2:现在让我们在这些示例中指定图像的尺寸。

HTML



  

    Semantic-UI Image Types
    
    
    

  

    
        

Geeksforgeeks

        Semantic-UI Image Types

        
                                                   
    
  

输出:

示例 3:

HTML



  

    Semantic-UI Image Types
    
    
    

  

    
        

Geeksforgeeks

        Semantic-UI Image Types

             
  

输出:

2. 图片链接:如果点击图片,您将被重定向到被链接的站点。它以与其他内容链接的方式进行格式化。

句法:

例子:

HTML



  

    Semantic-UI Image Types
    
    
    

  

    
        
            

Geeksforgeeks

            Semantic-UI Image Types

                                                   
    
  

输出:

参考: https ://semantic-ui.com/elements/image.html#types