Resizing Images

Resizing Images with the RCE

Click on your image and click the embed image button ( image icon ) in the text editor tools. There you can change the size (in pixels) of the image. Canvas will maintain the proper proportions on the image so it will not skew.

Edit Image popup box

Resizing Images with HTML

Images can be resized in HTML using the "height" and "width" properties. Take a look at the following image and its code:

<img src="$CANVAS_COURSE_REFERENCE$/file_ref/i24afec9f82ba82a26298568c3bcaa56c/download" alt="" width="29" height="50" data-api-endpoint="https://iu.instructure.com/api/v1/courses/1676957/files/80210465" data-api-returntype="File" />

The height and width properties can always be placed after the alt text tag, with an equal sign and quotation marks around the unit type, as above. The default unit type is pixels. Note that Canvas always maintains the aspect ratio regardless of any difference in the HTML values.

Value of "auto"

An image's height or width value can be set to "auto." A value of auto will scale that property in proportion to the other one's value according to the uploaded image's original dimensions. This is a useful way to ensure Canvas scales the image based on the property you choose.

Pro Tip: Make Banners Full-Size

If you set a banner's height and width properties to width="100%" height="auto" then you will have a banner that will always stretch across the screen and maintain its proportions.

Percentage values

Aside from the default pixels value, a percentage value can also be entered. For example:

<img src="$CANVAS_COURSE_REFERENCE$/file_ref/i24afec9f82ba82a26298568c3bcaa56c/download" alt="" width="50%" height="auto" data-api-endpoint="https://iu.instructure.com/api/v1/courses/1676957/files/80210465" data-api-returntype="File" />

Percentage values will cause that image to scale to that proportion of the browser viewing window. 50% means the image will scale to take up about half of the window at all times, even if the window is resized.

Note: Percentage values are handy for when you want an image to always be about the same size on the page, regardless of the size of the screen. Size your images so that a student on a small phone, medium tablet, or large monitor can all get the information they need.

Now it's your turn

TASK #1: Resize the image below using HTML to make the height and width equal to 50 px.

TASK #2: Expand and contract the size of your browser window and view how the two images below behave differently. Then, edit the HTML to make the first image have a width set to 50% and the height to adjust automatically.

Penthouse view of New York City skyline

Penthouse view of New York City skyline