由于图像可能需要几秒钟才能加载（或者不用），请使用 .image 容器指定 精确大小 的容器，以便布局不会因为图像加载或图像错误而出错。
Images
一个用于 响应式图片 的容器
<figure class="image is-128x128">
<img src="https://img.higrid.net/images/placeholders/128x128.png">
</figure>Fixed square images | 固定大小的方形图片 #
有 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 |
Retina images | 视网膜图片 #
因为图像的大小是固定的，所以可以使用 两倍大小 的图片。例如，在 128x128 容器中，您可以使用 256x256 的图片，但是可以调整为 128x128 像素。
<figure class="image is-128x128">
<img src="https://img.higrid.net/images/placeholders/256x256.png">
</figure>Responsive images with ratios | 根据比例响应式图片 #
如果您不知道确切的尺寸，但知道 比例，则可以使用 5种修饰符 中的一种：
image is-square |
 |
Square (or 1by1) |
image is-1by1 |
|
1 by 1 |
image is-4by3 |
 |
4 by 3 |
image is-3by2 |
 |
3 by 2 |
image is-16by9 |
 |
16 by 9 |
image is-2by1 |
 |
2 by 1 |
.image 容器在保持比例的情况下将会占据 整个宽度。
Variables | 变量 #
| Name | Default value |
|---|---|
| Name | Default value |
$dimensions
|
16 24 32 48 64 96 128
|
