Images can be made responsive and resized to maximum values of 600px, 700px, 800px, 1000px, 1200px, and maximum. It uses a class called res-img to do this. Changing the px value in the class will alter the image size when rendered. For example, a value of 800px will allow for responsive scaling to a maximum size of 800px, but the image can be scaled down to any size smaller. This is particularly useful for varying screen sizes. The more responsive the image, the better the user experience.
The res-img class centres the images, scaling them according to the chosen size. Increasing or decreasing the browser window will resize the images; the smaller the window the smaller the image. Large images will always scale down to fit inside the browser window. However, images smaller than the maximum image size will not be scaled up.
Please note that using res-img without a size option renders the image to maximum, which is the size of the original image. If that image is larger than 2000px, it may fill the browser window depending on screen size.
Example size classes
<div class="res-img-600">[[File:Grandstand steps, 10 March 1915.jpg]]</div><div class="res-img-700">[[File:Grandstand steps, 10 March 1915.jpg]]</div><div class="res-img-800">[[File:Grandstand steps, 10 March 1915.jpg]]</div><div class="res-img-1000">[[File:Grandstand steps, 10 March 1915.jpg]]</div><div class="res-img-1200">[[File:Grandstand steps, 10 March 1915.jpg]]</div><div class="res-img">[[File:Grandstand steps, 10 March 1915.jpg]]</div>(maximum size)
