📌  相关文章
📜  Bulma 任意元素的任意比率

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

Bulma 任意元素的任意比率

在本文中，我们将看到具有不同元素的 Bulma 任意比率。任意比率可用于 iframe 等任何元素。要使用任意比率，只需对要设置比率的类使用has-ratio修饰符即可。就像您可以在 iframe 或 img 元素上应用16by9比率类一样。通过使用此修饰符，用户可以看到更改并注意到比率是如何保持的。

Bulma 任意比率类：

  • has-ratio：这个类用于为 HTML 的任何元素设置任何特定的比率。
  • is-16by9：这是一个父类，用于为 HTML 元素设置 16 x 9 的纵横比。
  • is-7by3：这是一个父类，用于为 HTML 元素设置 7 x 3 的纵横比。
  • is-4by3：这是一个父类，用于为 HTML 元素设置 4 x 3 的纵横比。
  • is-1by1：这是一个父类，用于为 HTML 元素设置 1 x 1 的纵横比。

句法： 


    
      ....

示例 1：下面的示例说明了          

           
    
           
  

HTML



    Bulma Arbitrary ratios with any element
    
    
    
    
    


  

    

      GeekforGeeks
    

    

      Bulma Arbitrary Ratio in iframe/Image Element
    

    

      
    

    

      
    

    

      
    

  

输出：

Bulma 任意元素的任意比率

iframe 中的任意比例

示例 2：下面的示例说明了使用 元素的任意比率。

HTML 




    Bulma Arbitrary ratios with any element
    
    
    
    
    


  

    

      GeekforGeeks
    

    

      Bulma Arbitrary Ratio in iframe/Image Element
    

    

      
    

    

      
    

    

      
    

  

输出：

Bulma 任意元素的任意比率

Bulma 任意元素的任意比率

参考： https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element