Bulma - 图像

描述

本章介绍 Bulma 对图像的支持。 Bulma 使用 .image 类在页面中显示图像。

固定方形和圆形图像

Bulma 提供 7 种尺寸来显示图像 −

• is-16x16

• is-24x24

• is-32x32

• is-48x48

• is-64x64

• is-96x96

• is-128x128

Bulma 提供 .is-rounded 类来制作圆形图像。

以下示例描述了7 尺寸以上，显示圆形图像 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
      <link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Fixed Square Images
            </span>
            <br>
            <br>
            
            <figure class = "image is-16x16">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               16x16
            </span>
            <br>
            <br>
            
            <figure class = "image is-24x24">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               24x24
            </span>
            <br>
            <br>
            
            <figure class = "image is-32x32">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               32x32
            </span>
            <br>
            <br>
            
            <figure class = "image is-48x48">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               48x48
            </span>
            <br>
            <br>
            
            <figure class = "image is-64x64">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               64x64
            </span>
            <br>
            <br>
            
            <figure class = "image is-96x96">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               96x96
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               128x128
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Rounded Image
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img class = "is-rounded" src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
         </div>
      </section>
      
   </body>
</html>

执行上述代码，将显示以下输出 −

具有比例的响应式图像

Bulma 为图像提供了以下 16 种比例修饰符。

• is-square

• is-1by1

• is-5by4

• is-4by3

• is-3by2

• is-5by3

• is-16by9

• is-2by1

• is-3by1

• is-4by5

• is-3by4

• is-2by3

• is-3by5

• is-9by16

• is-1by2

• is-1by3

以下示例指定使用比例修饰符显示图像(此处，我们在 figure 标签中使用 is-2by1 比例修饰符) −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
      <link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Images with Ratio
            </span>
            <br>
            <br>
            
            <figure class = "image is-2by1">
               <img src = "https://www.tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>    
         </div>
      </section>
   </body>
   
</html>

它显示以下输出 −

要使用剩余的比例修饰符，请在 figure 标签中将上述修饰符替换为您的比例修饰符。

bulma_elements.html