由于图像可能需要几秒钟才能加载（或根本无法加载），因此请使用 image 容器指定精确大小的容器，这样您的布局就不会因图像加载或图像错误而中断。
赞助商
图像
响应式图像的容器
示例
HTML
<figure class="image is-128x128">
<img src="https://bulma.org.cn/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.org.cn/assets/images/placeholders/128x128.png" />
</figure>Retina 图片 #
由于图片的尺寸是固定的，你可以使用一张 大四倍 的图片。例如，在 128x128 的容器中，你可以使用一张 256x256 的图片，但将其调整为 128x128 像素。
示例
HTML
<figure class="image is-128x128">
<img src="https://bulma.org.cn/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 变量
|
值
|
|---|---|---|
|
|
|