Image

A container for responsive images

Colors No

Sizes No

Variables Yes

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="https://versions.bulma.io/0.7.5/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:

      <figure class="image is-128x128">
  <img class="is-rounded" src="https://versions.bulma.io/0.7.5/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.

      <figure class="image is-128x128">
  <img src="https://versions.bulma.io/0.7.5/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