Bulma-elements-image
提供：Dev Guides
ブルマ-画像
説明
この章では、画像の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/[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://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/[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://www.finddevguides.com/bootstrap/images/64.jpg">
</figure>
</div>
</section>
</body>
</html>以下の出力が表示されます-
残りの比率修飾子を使用するには、_figure_タグで上記の修飾子を比率修飾子に置き換えます。
