Images on pages ... randomly resizing?

[sfrizelle]

Hello All,

We've been using Canvas for not quite a year. Many of our teachers are using a page as a front landing page and linking from there. In the past few months, I have had a handful of teachers tell me their images have randomly resized themselves. Each of these teachers are using tables and sizing the images with percentages. I personally created one of the pages myself - so I know how it was created. I have seen how the page has resized the images. So I know it has happened. I also checked to make sure the pages hadn't been recently updated or change. They had not.

I have called Canvas support - but as you can imagine - they couldn't help much. I don't blame them. Gremlins are very hard to track. If you believe in Gremlins at all. 

My question to you all is this: (1) Have any of you ever experienced this? (2) Any ideas on what might be causing this?

Thank you for any insight you might be able to provide. Really appreciate it. 

Warm Regards,

Sara

[Shar]

Hi Sara Frizelle,

In reading your situation a few things struck me right immediately:

1. Using table for layout causes accessibility issues unless you specific role=presentation. See screen-reader test.
2. Using the percentages for sizing the images means the images will change size based on the size of the screen.
3. It's been my experience that images in tables will resize when viewed on different screens; I once ended up with a tiny picture on the mobile screen that looked fine on desktop.

So, are you saying the images have resized on the same screen width? And the images have resized compared to how they were months ago or minutes ago (within the same session)? Are all the images changing size or just some?

If you can provide some screen shots pointing out the size differences, we could offer other suggestions. For right now, I'd also check if the images are different sizes in different browsers (Chrome & Firefox) and check to see if the Global Navigation is expanded or collapsed as that will affect how much usable space the screen has to display especially on smaller screens.

Otherwise, have the images themselves changed at all? Like new uploads? Oh and are the images getting resized smaller or bigger?
Cheers - Shar

[sfrizelle]

Hello @Sharmaine Regisford,

Thank you so much for incredibly helpful post. I see you are from UW! I was recently at UW Bothell for about 5 years. Such a small world. 

To answer your questions,

So, are you saying the images have resized on the same screen width? Yes. Using the same computer, same monitor.

And the images have resized compared to how they were months ago or minutes ago (within the same session)? Yep. Crazy.

Are all the images changing size or just some? All images on the page shrink. They don't get bigger. Always shrink.

We've checked using Chrome, Safari and Firefox. Same result. We also checked the navigation and having it expanded or collapsed did not change the result.

I definitely think @Jeffrey Anderson has hit the nail on the head with the explanation from the recent Canvas Deploy Notes. A big thanks to the both of you for helping me out!

Warm Regards,

Sara

[themidiman · Accepted solution]

This happened to someone at our institution. For all the reasons above that ishar-uw mentioned I advised against the use of tables and recommended a redesign. Then someone found this note on the deploy from last month: (Scroll down to Rich Content Editor section)

https://community.canvaslms.com/docs/DOC-17628-canvas-deploy-notes-2019-08-28#jive_content_id_Interf... 

Image Size

Images added to the Rich Content Editor display in their natural size.

Explanation: When an image was added to the Rich Content Editor, setting a maximum width caused it to shrink. Canvas code has been updated to correct the behavior of shrinking images with a maximum width.

[kharris713]

Hello,

The tables on my page actually contain data. There is an image only in the first row. I have toggled back and forth between changing the table setting from pixels to percentage with no luck. I have deleted the tables and re-added; however, over time, the tables resize without any editing. Any thoughts?

[c_murrell]

Canvas is still shrinking images.  I have no width setting in the table I am using.  I have tried native size for the image, manually setting the image size in the RCE Embed Image popup (the dimensions), and I have tried hacking the HTML for the images to set them to different values.

I have even resized the image outside of Canvas and uploaded it without changing the dimensions and then Embedding the image in the RCE and it is the same result.  This means Canvas is FORCING a resize of an image and completely ignoring the native size of the image. 

It is STILL resizing the images to all different sizes, and they are all still randomly shrinking.

Sorry, but this problem does not seem to be solved.  

[mark_simmons5]

Agreed, images across a variety of courses are still resizing automatically. I have tried all that you mentioned and even deleting entire tables/pages and starting from scratch.

[ebloomfield]

We have experienced same shrinking of images - last week.  So I don't think it is resolved either. 

Ellen

[BarbaraCushing]

I had the same problem....

What I did was go into the HTML code and located the width size percentages for each table cell, for example this is what I had originally for one of my cells: <td style="width: 8.21%; text-align: center; height: 42px;">

Since I had 5 cells with buttons (that were all the same size), I divided 100÷5 to get 20. I then put 20% in all of the cell percentages. For example: <td style="width: 20%; text-align: center; height: 42px;">. 

At least for me, that seemed to have worked.....

[libermar]

Thank you!!! That did it.

[LCB44]

This thread is a few years old but apparently this is still an issue in Canvas. Thanks for your reply. Editing the HTML is what did the trick for me just now.

[paul_fynn]

Whilst we no longer have issues with image resizing in the desktop Canvas interface, we continue to have issues with

• link length distorting Canvas table widths ie a long link appears to override the cell width settings and force the cell/column to be wider than it should, reducing the size of the remaining columns
• In the Canvas App it seems almost impossible to control the respective size of images (unless this is also link related)

Does anyone have any insights on this please?