Positioning images

Whichever technique you use for bitmap images, you can position most of them using the HTML5 figure and figcaption elements. They are governed by two sets of classes:

1. Classes that apply position (image-right, image-left, image-centre-huge)
2. Classes that apply size (e.g. small, medium, large)

You pick a class from each category to put an image where you want and at the size you want e.g. <figure class="image-right small">... would put your image to the right of the text, at a width of 180px. See the examples on this page.

The image classes and widths defined in the style sheet are:

• icon: 80px
• tiny: 100px
• small: 180px
• medium: 220px
• large: 260px
• xlarge: 300px

Note that you won't be able to use these classes if you use the w descriptor with srcset (see Bitmaps with HTML5).

Finally here is an image that spans 90% of the page (.image-centre-huge).

• Images
• Back to the top