因为加载图像可能需要几秒钟（或者根本不需要），所以请使用图像容器指定精确大小的容器，这样布局就不会因为图像加载或图像错误而中断。
图像容器（Image）
一个容器，用于存储响应图像
1
Example
HTML
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
1.固定正方形图像
有7个维度可供选择，对头像 avatars很有用：
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 |
2.圆形图像
可以使用 is-rounded类生成圆角图像:
Example
HTML
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
2.视网膜图像
因为图像的大小是固定的，所以可以使用四倍大的图像。例如，在128x128容器中，可以使用256x256图像，但大小调整为128x128像素。
Example
HTML
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
4.反应灵敏的图像
如果您不知道确切的尺寸，但知道比率，则可以使用16个比率修饰符之一，其中包括静态摄影中常见的纵横比：:
image is-square |
 |
Square (or 1 by 1) |
image is-1by1 |
|
1 by 1 |
image is-5by4 |
 |
5 by 4 |
image is-4by3 |
 |
4 by 3 |
image is-3by2 |
 |
3 by 2 |
image is-5by3 |
 |
5 by 3 |
image is-16by9 |
 |
16 by 9 |
image is-2by1 |
 |
2 by 1 |
image is-3by1 |
 |
3 by 1 |
image is-4by5 |
 |
4 by 5 |
image is-3by4 |
 |
3 by 4 |
image is-2by3 |
 |
2 by 3 |
image is-3by5 |
 |
3 by 5 |
image is-9by16 |
 |
9 by 16 |
image is-1by2 |
 |
1 by 2 |
image is-1by3 |
 |
1 by 3 |
唯一的要求是父元素已经具有特定的宽度。
图像容器通常占据整个宽度，同时保持完美的比例。
如果没有，可以通过附加is fullwidth修饰符来强制它。
5.样式
您可以对img以外的任何元素应用特定的比率，只需对可调整大小的元素应用has-ratio修饰符即可。
例如，可以在iframe上应用16by9比率。调整浏览器的大小，您将看到该比率是如何保持的。
Example
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>