布尔玛视网膜图像

Bulma 是一个基于 Flexbox 的免费开源CSS 框架。它可以帮助开发人员构建响应式网站。在本文中，我们将讨论 Bulma 中的Retina 图像。

Bulma 中的图像类帮助我们指定这个预定义大小的容器。图像的大小是固定的，但我们可以使用几倍大的图像。假设我们有一个大小为 128X128 的图像容器，并且我们想要插入大小为 256X256的图像，那么我们可以插入它，但它会被调整为 128X128 以保持正确的大小。在这种情况下使用Retina图像。下面的例子将帮助您更好地理解它。

布尔玛视网膜课程：

• is-16×16：该类用于设置图像的尺寸为16×16像素。
• is-24×24：该类用于设置图像的尺寸为24×24像素。
• is-32×32：该类用于设置图像的尺寸为32×32像素。
• is-48×48：该类用于设置图像的尺寸为48×48像素。
• is-64×64：该类用于设置图像的尺寸为64×64像素。
• is-96×96：该类用于设置图像的尺寸为96×96像素。
• is-128×128：该类用于设置图像的尺寸为128×128像素。

句法：

示例 1：在下面的示例中，我们使用 Retina 类将图像大小调整为 128×128 像素的大小。

HTML

  

    

  

    

      GeeksforGeeks
    
    
Bulma Retina
    Image without using the Retina class
    

        

            
        
        Image after using the Retina class
        

            
        
    

  

输出：

布尔玛视网膜图像

示例 2：在下面的示例中，我们使用 Retina 类将图像大小调整为 64×64 像素的大小。

HTML

  

    

  

    
GeeksforGeeks
    
Bulma Retina
    Image without using the Retina class
    

        

            
        
        Image after using the Retina class
        

            
        
    

  

输出：

布尔玛视网膜图像

参考：https://bulma.io/documentation/elements/image/#retina-images