Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
jknippers
New Member

Responsive Images

Jump to solution

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?

1 Solution

Accepted Solutions

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%? 

View solution in original post

3 Replies
moutona
New Member

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!

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%? 

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>