Image

A container for responsive images

Because images can take a few seconds to load (or not at all), use the image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

<figure class="image is-128x128">
    <img src="/static/placeholders/128x128.png">
</figure>

Fixed square images

There are 7 dimensions to choose from, useful for 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

Responsive images with ratios

If you don't know the exact dimensions but know the ratio instead, you can use one of the 16 ratio modifiers, which include common aspect ratios in still photography:

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