Markup - Post with Images

Displaying images in posts

Here are some examples of what a post with images might look like. You should add image class to <img> tag.

Fixed Square Images

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

image is-16x16
16x16
16x16px
image is-24x24
24x24
24x24px
image is-32x32
32x32
32x32px
image is-48x48
48x48
48x48px
image is-64x64
64x64
64x64px
image is-96x96
96x96
96x96px
image is-128x128
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 5 ratio modifiers:

image is-square
Square
Square (or 1by1)
image is-1by1
1By1
1 by 1
image is-4by3
4By3
4 by 3
image is-3by2
3By2
3 by 2
image is-16by9
16By9
16 by 9
image is-2by1
2By1
2 by 1

The .image container will take up the whole width while maintaining the perfect ratio.

Ethan Hullett

Ethan Hullett
Student at Kent University