Please note: some sections of these instructions require an understanding of HTML and CSS.
By default, images that are uploaded in the body of a page are automatically given a CSS class which makes them dynamically resize based upon the size of the display being used by the webpage viewer - this ensures, for example, that images automatically shrink in a dynamic manner when the webpage is viewed on a device such as a tablet or mobile phone. It is possible to override this behaviour, but you should not ordinarily do this unless you understand the implications. By overriding this behaviour, it is likely that some visitors to your website will see a poorly-displayed version of the site - for example, images may not properly fit on the page and require visitors to scroll the page from side to side to see the entire webpage.
Configuring a single image to not autoscale
In the editing interface for a page, right click on the image you want to configured and choose the Image Properties option:
In the dialog box that appears, go the Advanced tab, and type no-auto-scale into the Stylesheet Classes box:
Finally, click the OK button and then save the page you were editing.
Configuring a group of images to not autoscale
If you have a table containing images that you do not wish to autoscale, edit the webpage, right click on the table, and click Table properties. In the dialog box that appears, go the Advanced tab, and type no-auto-scale into the Stylesheet Classes box.
Similarly, if you have an HTML div containing images, you can right click on the div whilst editing the page, and choose the Edit div option. In the dialog box that appears, the General tab should already be visible by default; type no-auto-scale into the Stylesheet Classes box.
Configuring by editing the underlying HTML
As explained in the introduction, your website is configured by default to automatically scale images uploaded into the body of a page. To override this, you can either:
- add the no-auto-scale class to an img element
- add the no-auto-scale class to a parent of the img element
Thus, either of the two fragments of HTML will disable the automatic scaling behaviour:
- <img src="https://www.ch.cam.ac.uk/image.png" class="no-auto-scale" />
- <div class="no-auto-scale"><img src="https://www.ch.cam.ac.uk/image1.png" /><img src="https://www.ch.cam.ac.uk/image2.png" /></div>
N.B. in the second example, a <div /> element was used by way of example, but the example works for any parent HTML element of the <img />. The instructions given earlier in this page just explain how to add the appropriate CSS class via the GUI editing tool, rather than having to edit the underlying HTML.