画像の読み込みには数秒かかる場合がある（またはまったく読み込まれない）ため、imageコンテナを使用して、正確なサイズのコンテナを指定します。これにより、画像の読み込みや画像のエラーによってレイアウトが崩れるのを防ぎます。
スポンサー
Image
レスポンシブ画像用のコンテナ
例
HTML
<figure class="image is-128x128">
<img src="https://bulma.dokyumento.jp/assets/images/placeholders/128x128.png" />
</figure>固定された正方形の画像 #
アバターに役立つ7つの寸法があります
image is-16x16
|
|
16x16px |
image is-24x24
|
|
24x24px |
image is-32x32
|
|
32x32px |
image is-48x48
|
|
48x48px |
image is-64x64
|
|
64x64px |
image is-96x96
|
|
96x96px |
image is-128x128
|
|
128x128px |
丸い画像 #
is-roundedクラスを使用して、丸い画像を作成することもできます
例
HTML
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.dokyumento.jp/assets/images/placeholders/128x128.png" />
</figure>Retina画像 #
画像のサイズが固定されているため、4倍大きい画像を使用できます。たとえば、128x128コンテナでは、256x256の画像を使用できますが、128x128ピクセルにサイズ変更されます。
例
HTML
<figure class="image is-128x128">
<img src="https://bulma.dokyumento.jp/assets/images/placeholders/256x256.png" />
</figure>比率を使用したレスポンシブ画像 #
正確な寸法は不明だが、代わりに比率がわかっている場合は、静止画で一般的なアスペクト比を含む16の比率修飾子のいずれかを使用できます
image is-square |
|
正方形（または1対1） |
image is-1by1 |
|
1対1 |
image is-5by4 |
|
5対4 |
image is-4by3 |
|
4対3 |
image is-3by2 |
|
3対2 |
image is-5by3 |
|
5対3 |
image is-16by9 |
|
16対9 |
image is-2by1 |
|
2対1 |
image is-3by1 |
|
3対1 |
image is-4by5 |
|
4対5 |
image is-3by4 |
|
3対4 |
image is-2by3 |
|
2対3 |
image is-3by5 |
|
3対5 |
image is-9by16 |
|
9対16 |
image is-1by2 |
|
1対2 |
image is-1by3 |
|
1対3 |
唯一の要件は、親要素がすでに特定の幅を持っていることです。
imageコンテナは通常、完璧な比率を維持しながら、全幅を占有します。
そうでない場合は、is-fullwidth修飾子を追加して強制できます。
任意の要素での任意の比率 #
img以外の任意の要素に、リサイズ可能な要素にhas-ratio修飾子を適用するだけで、特定の比率を適用できます。
たとえば、iframeに16by9の比率を適用できます。ブラウザのサイズを変更すると、比率がどのように維持されるかがわかります。
例
HTML
<figure class="image is-16by9">
<iframe
class="has-ratio"
width="640"
height="360"
src="https://www.youtube.com/embed/YE7VzlLtp-4"
frameborder="0"
allowfullscreen
></iframe>
</figure>SassとCSS変数 #
|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|