因为加载图像可能需要几秒钟(或者根本不需要),所以请使用图像容器指定精确大小的容器,这样布局就不会因为图像加载或图像错误而中断。
图像容器(Image)
一个容器,用于存储响应图像
1
Example
HTML
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
2.视网膜图像
因为图像的大小是固定的,所以可以使用四倍大的图像。例如,在128x128容器中,可以使用256x256图像,但大小调整为128x128像素。
Example
HTML
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