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.
Image
A container for responsive images
Example

HTML
<figure class="image is-128x128">
<img src="https://bulma.io/assets/images/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 |
Rounded images #
You can also make rounded images, using is-rounded
class:
Example

HTML
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>
Retina images #
Because the image is fixed in size, you can use an image that is
four times as big. So for example, in a 128x128
container, you can use a
256x256
image, but resized to 128x128 pixels.
Example

HTML
<figure class="image is-128x128">
<img src="https://bulma.io/assets/images/placeholders/256x256.png" />
</figure>
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 |
The only requirement is for the parent element to already have a specific width.
The image
container will usually take up the whole width while maintaining the perfect
ratio.
If it doesn't, you can force it by appending the is-fullwidth
modifier.
Arbitrary ratios with any element #
You can apply a specific ratio on any element other than an img
,
simply by applying the has-ratio
modifier to a resizable element.
For example, you can apply a 16by9
ratio on an iframe
. Resize the browser, and you'll see
how the ratio is maintained.
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>
Sass and CSS variables #
Sass Variable
|
Value
|
---|---|
|
|