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/[email protected]/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/[email protected]/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://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               16x16
            </span>
            <br>
            <br>
            
            <figure class = "image is-24x24">
               <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               24x24
            </span>
            <br>
            <br>
            
            <figure class = "image is-32x32">
               <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               32x32
            </span>
            <br>
            <br>
            
            <figure class = "image is-48x48">
               <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               48x48
            </span>
            <br>
            <br>
            
            <figure class = "image is-64x64">
               <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               64x64
            </span>
            <br>
            <br>
            
            <figure class = "image is-96x96">
               <img src = "https://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>
            
            <span class = "is-size-6">
               96x96
            </span>
            <br>
            <br>
            
            <figure class = "image is-128x128">
               <img src = "https://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://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/[email protected]/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/[email protected]/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://tutorialspoint.com/bootstrap/images/64.jpg">
            </figure>    
         </div>
      </section>
   </body>
   
</html>

它显示以下输出：

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

bulma_elements.htm

打印页面