--- title: Image layout: documentation doc-tab: elements doc-subtab: image dimensions: - 16 - 24 - 32 - 48 - 64 - 96 - 128 --- {% capture image %}
{% endcapture %} {% capture retina_image %}
{% endcapture %} {% include subnav/subnav-elements.html %}

Images

A container for responsive images

{% include meta.html colors=false sizes=false variables=true %}

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.

{% include snippet.html content=image %} {% include anchor.html name="Fixed square images" %}

There are 7 dimensions to choose from, useful for avatars:

{% for dimension in page.dimensions %} {% endfor %}
image is-{{ dimension }}x{{ dimension }}
{{ dimension }}x{{ dimension }}px
{% include anchor.html name="Retina images" %}

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

{% include snippet.html content=retina_image %} {% include anchor.html name="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](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#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 take up the whole width while maintaining the perfect ratio.

{% include variables.html type='element' %}