Of Pixels and Percentages

If you would like your images to automatically resize to fit your user's browser window, you can modify the width to display as a percentage instead of pixels. In other words, if you specify that you'd like your image to take up 30% of the total page width instead of, say 500 pixels, the image size will automatically adjust to fit each user's screen.

Images that adjust with the screen size come in handy for users who access the course on mobile devices or tablets. Adjustable-width images also play a big part in elaborate pages that feature multiple design elements.

Using HTML to Create Responsive Image Widths

To switch your image widths from pixels to percentages, you'll need to navigate to your Canvas page and:

Click Edit
Switch to HTML Editor
Locate the HTML code for the image(s) you'd like to adjust
- Using Control+F or Command+F to search for <img may make this process easier
Locate the image's width attribute
Replace the width value enclosed in quotation marks with a percentage; you do not have to delete the height attribute, but you do need to ensure that the width value is enclosed in quotation marks (e.g., width="80%")
Switch to Rich Content Editor to preview the changes

Note: If you do not include the percent sign in your width, your browser will read the width in pixels!

The screencast below demonstrates how to change the width from pixels to a percentage.

Source: Adjusting Image Widths in Canvas

Clemson Online

This training resource was developed by April Pelt for Clemson Online. Please feel free to share these materials with your colleagues.