Responsive Images

[jknippers]

Has anyone been able to make images in Canvas responsive so that they will change size when an user changes the browser window size? I have tried inputting the CSS for a responsive image, but Canvas deprecates it upon clicking "Save." Is this one of the CSS stylings that's not allowed?

[moutona]

To make images responsive in Canvas, you can switch over to the HTML Editor and then go into the image tag and add a % value (100% is width of page, 50% is half the width of the page, etc).  Then save the page and voila!

Here's an example of the code and where you need to stick the % value:

<img src="https://seattleu.instructure.com/courses/1572026/files/63450042/preview" alt="window_banner_small.jpg" width="96%" data-api-endpoint="https://seattleu.instructure.com/api/v1/courses/1572026/files/63450042" data-api-returntype="File" />

Just copy paste width="%" into the <img src="imageName.jpg"> tag after the end quote around the image name and you're good to go!

[yuyenchang · Accepted solution]

Is there a way to control the break points so when the screen size reaches a certain width, the size of the images will go back to 100%? 

[ctm121]

I found some code that I've started using to adjust for smaller or larger screens. My understanding of it is fairly limited, and there's been a lot of trial and error work.

The highlighted settings are those that I find need to be altered most often, based on the specific page content. Each col-xs or col-md row can fit a value up to 12. In this example, a smaller screen (col-xs) will stack the text above the image, giving each a full row (col-xs-12). A larger screen will place the text (col-md-7) on the left, slightly wider than the image (col-md-5) on the right (7+5=12).

I hope this helps!

<div class="content-box" style="margin: -0.75em 0 -0.5em 0;">
<div class="grid-row">
<div class="col-xs-12 col-md-7">
<div class="styleguide-section__grid-demo-element">
<p>Words go here.</p>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="styleguide-section__grid-demo-element">
<figure style="margin: 0.5em;"><img src="" alt="" width="100%" />
<figcaption style="font-size: 75%;">Figure #.#: Caption text goes here.</figcaption>
</figure>
</div>
</div>
</div>
</div>