Help with replacing an image to retain 'responsiveness'

[suzanne_figures]

Hoping someone can help...

I am trying to get a 'responsive' Front page in all the courses at my school. As a template, I would like to use the Front page of the Growing with Canvas course available in Commons, in particular, the table part shown below. (I guess it is a table...)

Problem is, I don't know how to replace the images in a way that still makes the image stay within that 'cell'. 

Here is an example where I have replaced the 'agriculture' images in the Growing with Canvas course by selecting the existing image and then uploading the image I want.

Looks ok until I change the width of the screen/monitor....The images are no longer 'responsive' and don't resize to stay within the table cell.

I have tried looking at the html code but really don't know what I'm looking for! I have put the page in Canvas Commons. The link is here. if someone would be kind enough to look at the code OR, tell me how to replace the original Growing with Canvas course images with different images so as to not lose the image's ability to resize nicely within the 'cell'.

The code is here just in case something jumps out at you!

Many many many thanks!

All the best

Suzanne

[Bobby2]

Hi  @suzanne_figures  Thank You  for your question.

I'm going to share this with an expert -  @tina_busch  is a whizz at this sort of thing.

[suzanne_figures]

?Hi Bobby

Thank you for sharing the question with Tina. I appreciate you trying to help me!

Kind regards

Suzanne

[tina_busch]

Hi Suzanne, When you resize your browser to view the images you will need to refresh the screen for the images to resize/respond.

You can also set the width of the images to 100% which will mean they will respond without you having to refresh your screen.

Cheers

Tina

[tina_busch · Accepted solution]

Suzanne

I've just played with the page that I imported from Commons. By setting a width of 100% to each of the images it worked as you want it to. I've done a screen grab below but you will have to enable flash to view it sorry.

This image shows what I suggest you delete from the code for each image and where you need to add the 100%.

I hope that helps.

Cheers

Tina

[suzanne_figures]

?Big thank you Tina! Very much appreciated.

If I wanted to use this layout as a template and encourage the teachers to change the images to fit their course, would it work if you just do the following:

1. Go to editing mode

2. Select the image you want to change

3. Delete it

4. Upload a new image

5. save

Would that process keep all the formatting?

If not, I'd be extremely grateful for instructions on the best way to replace the image without wrecking everything!

Again, really appreciate your wonderful help!

[tina_busch]

Yes and no. It will remove the 100% width code when you delete the previous image but ... when you insert a new image into the rich content editor it will make the image automatically responsive (as long as you don't set a fixed width/height), so no matter what screen/device size you view the page on, the image will fit the frame or cell that it's sitting in correctly. If you resize your browser though, it wont respond until you refresh the browser. So yes it's still responsive for different screen/device sizes but you need the 100% width there if you want it to respond dynamically when dragging the browser to a different size. I hope that makes sense, sorry I'm not the best at technically describing all this

[suzanne_figures]

?Many thanks Bobby!