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.

Eray AYDIN

Eray AYDIN
Senior PHP Developer and Linux System Administrator, Free Software Fan, Archy (On Way Trust User), Junior Game Developer