图像

一个自适应图像容器

由于图像加载需要一点儿时间（有时可以忽略不计），使用 image 容器规划一个精准大小的空间将保证您的页面布局因为图像加载慢或者图像出现错误而崩溃。

示例

HTML

<figure class="image is-128x128">
  <img src="https://railsway.cn/bulma/images/placeholders/128x128.png">
</figure>

固定方形图像 #

这有用于 avatar 的 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://railsway.cn/bulma/images/placeholders/128x128.png">
</figure>

Retina 图像 #

由于 image 容器的大小是固定的，但是您可以使用一个大四倍的图像。例如，在一个 128x128 大小的容器内，您可以用一个 256x256 大小的图像，只不过需要重置大小为 128x128 像素。

示例

HTML

<figure class="image is-128x128">
  <img src="https://railsway.cn/bulma/images/placeholders/256x256.png">
</figure>

按比例自适应图像 #

如果您不知道精确的面积但知道比例（ratio），您可以用 16 种比例修饰符之一（包含了静态照片的常用比例）来表示：

`image is-square`		方形（或者 1 : 1)
`image is-1by1`		1 by 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

唯一的要求就是父元素要指定宽度（width）。

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>