语义 UI 占位符图像内容

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。在本文中，我们将了解占位符变体。

Semantic-UI 占位符用于为即将出现在网页布局中的内容保留空间。 Semantic-UI Placeholder Image Content用于显示图像内容的占位符布局。此外，使用 .square 和 .rectangular 类来设置图像占位符布局的纵横比。

Semantic-UI 占位符图像内容使用的类：

• image：该类用于显示图像内容的占位符布局。
• square：该类用于以正方形（1:1 比例）显示图像占位符布局。
• 矩形：该类用于以方形份额（4:3 比例）显示图像占位符布局。

句法：

示例 1：在此示例中，我们将创建一个包含图像和标题内容的简单博客布局。

输出：

示例 2：在此示例中，我们将创建一个包含图像和内容的简单卡片布局。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI Placeholder Image Content
    
    


  
    

        

            

                

                    

                
            
        
  
        

            

                

                    

                        

                        

                        

                        

                        

                    
                
            
        
  
        

            

                

                    

                
            
        
  
        

            

                

                    

                        

                        

                        

                        

                        

                    
                
            
        
  
        

            

                

                    

                
            
        
    

  

输出：

示例 3：在此示例中，我们将创建一个包含正方形和矩形形状的简单图像布局。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI Placeholder Image Content
    
    


  
    

        

            

                

                    

                
            
        
  
        

            

                

                    

                
            
        
  
        

            

                

                    

                
            
        
    

  

输出：

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