Positioning images

Test image 200px
image-right tiny (100px)

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)
Human Data meeting
image-left xlarge (300px)

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:

Test image 360px
image-right small (180px)
  • 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).

Test image 1600px