ブルマ-画像

説明

この章では、画像のBulmaサポートについて説明します。 Bulmaは_.image_クラスを使用して、ページに画像を表示します。

固定された正方形および丸みのある画像

ブルマは、画像を表示するために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.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               16x16
            </span>
            <br>
            <br>

            <figure class = "image is-24x24">
               <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               24x24
            </span>
            <br>
            <br>

            <figure class = "image is-32x32">
               <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               32x32
            </span>
            <br>
            <br>

            <figure class = "image is-48x48">
               <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               48x48
            </span>
            <br>
            <br>

            <figure class = "image is-64x64">
               <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               64x64
            </span>
            <br>
            <br>

            <figure class = "image is-96x96">
               <img src = "https://www.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

            <span class = "is-size-6">
               96x96
            </span>
            <br>
            <br>

            <figure class = "image is-128x128">
               <img src = "https://www.finddevguides.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.finddevguides.com/bootstrap/images/64.jpg">
            </figure>

         </div>
      </section>

   </body>
</html>

上記のコードを実行すると、以下の出力が表示されます-

比率のあるレスポンシブ画像

Bulmaは、画像に16以下の比率修飾子を提供します。

平方
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.finddevguides.com/bootstrap/images/64.jpg">
            </figure>
         </div>
      </section>
   </body>

</html>

以下の出力が表示されます-

残りの比率修飾子を使用するには、_figure_タグで上記の修飾子を比率修飾子に置き換えます。

Bulma-elements-image

ブルマ-画像

説明

固定された正方形および丸みのある画像

比率のあるレスポンシブ画像

目次