图像容器(Image)

一个容器,用于存储响应图像

因为加载图像可能需要几秒钟(或者根本不需要),所以请使用图像容器指定精确大小的容器,这样布局就不会因为图像加载或图像错误而中断。

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>

6.变量

Name
Type
Value
Computed Value
Computed Type
$dimensions
string
16 24 32 48 64 96 128

返回头部

问题反馈
返回顶部