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.
---
title: Image
layout: documentation
doc-tab: elements
doc-subtab: image
dimensions:
- 16
- 24
- 32
- 48
- 64
- 96
- 128
breadcrumb:
- home
- documentation
- elements
- elements-image
meta:
colors: false
sizes: false
variables: true
---
{% capture image %}
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.
There are 7 dimensions to choose from, useful for avatars:
image is-{{ dimension }}x{{ dimension }} |
![]() |
{{ dimension }}x{{ dimension }}px |
You can also make rounded images, using is-rounded class:
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.
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 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.
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.