Scalable Images

I added some images to my Design page. How do I make them scalable so they view correctly on mobile sites?

Thanks!
Amberley

If you add an image to a webpage, you can add a class called img-responsive to the img tag to help it be responsive to screen sizes. Go into the source by clicking on the <> button in the webpage editor and find the img tag and add the class.

Here is an example: <img class="img-responsive" src="path and name to your photo" alt="my photo description">

This should solve your issue.

If you add an image to a webpage, you can add a class called img-responsive to the img tag to help it be responsive to screen sizes. Go into the source by clicking on the <> button in the webpage editor and find the img tag and add the class.

Here is an example: <img class="img-responsive" src="path and name to your photo" alt="my photo description">

This should solve your issue.

What would the CSS code look like that goes with class?

Thanks.

Dhara,

Sorry, I wan't clear. img-responsive is already a built in boostrap class, so you don't have to add anything into your stylesheet. You can look at what the css looks like if you do an inspect element on an img tag that uses it in the browser.

Does the "img-responsive" class replace a (for example) "width="250" specific size?
And can I add the img-responsive with an image that I've coded to do other things like float left?
Here's what I've got right now:
<img class="painting2" src="/content/uploads/RobertWMooreFineArt/Boats_at_market_smaller.png" alt="Shanghai Boats at Market Oil on Canvas Painting" width="250" />
How would this code change if I added the "img-responsive" tag? And do I need to add it to help work better with a mobile device?
Thanks.

I always size my original image to be the size I want on a full resolution screen(desktop). Then add the img-responsive class to control the "scaling" of the image as you go down to smaller screens like on mobile devices. If you look at inspect element, you will see how this class styling works. The max-width:100% is saying that you don't want the image to be any bigger than 100% of the size of the parent tag that is holding it.

Code: Select all

.img-responsive {  
    display: block;  
    height: auto;  
    max-width: 100%; 
}

So for your example:

Code: Select all

<img class="painting2 img-responsive" src="/content/uploads/RobertWMooreFineArt/Boats_at_market_smaller.png" alt="Shanghai Boats at Market Oil on Canvas Painting"/>

One trick I do when I'm doing a rush job is to use this CSS:

Code: Select all

img {  
    height: auto;  
    max-width: 100%; 
}

This will apply to ALL images on the site and it less time consuming then apply the class to every single image tag.