Bulmaのイメージ Image [CSSフレームワーク]

Webページにサイズの大きい画像を配置した際、画像の読み込みに時間がかかってしまう場合やまったく読み込まれない場合があります。

Bulmaにはこのようなエラーが発生した時に、画像読み込みの失敗でレイアウトが崩れないようにするためのクラスが用意されています。

今回は、画像を配置する際に使用するimageクラスについて紹介します。

レスポンシブ画像のコンテナを作成するimageクラス

imageクラスを使用すると、指定したサイズの画像に拡大、または縮小して表示することができます。

Bulmaには画像を正方形に調整するためのサイズ指定クラスが用意されています。
サイズには以下の7種類があります。

それぞれのサイズを指定する際に使用するクラスは以下の通りです。

例えば、128 x 128pxの領域に画像を表示したい場合のHTMLは、次のように記述します。

<figure class="image is-128x128">
  <img src="example.png">
</figure>

</figure>

img要素を配置する親の要素にimageクラスとサイズを表すクラス（上記の例では「image is-128×128」）を指定します。

正方形のサイズに画像を調整してくれるこれらのクラスは、アバターの表示を行う場合などに便利です。

ここではimageクラスを使用した画像の表示例を示します。

以下の画像

を96 x 96pxのサイズで表示すると

HTML

<figure class="image is-96x96">
  <img src="image/sample01.jpg">
</figure>

</figure>

のように、96 x 96pxのサイズに収まるように縮小して表示されます。

次に、以下の画像

を128 x 128pxのサイズで表示すると

HTML

<figure class="image is-128x128">
  <img src="image/sample02.jpg">
</figure>

</figure>

のように、128 x 128pxのサイズまで拡大して表示されます。

imageクラスを使用した画像の表示では、画像を丸く切り抜いて表示させるためのクラスが用意されています。
画像を丸くする際は、画像を表示するimg要素のclass属性にis-roundedクラスを指定します。

<figure class="image is-128x128">
  <img class="is-rounded" src="avatar.png">
</figure>

</figure>

例えば以下の画像

を128 x 128pxのサイズで丸く切り抜くと

のように表示されます。

正確な寸法（サイズ）がわからないが比率が分かっている場合は、比率を表すクラスで指定することもできます。
比率によるクラスの指定には、以下の16種類があります。