Scalable Images

Need help? Please give a detailed explanation of your problem.
Post Reply
Signsetc122051
Posts: 5
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Oct 06, 2015 9:33 pm
Website: www.signsetccolorado.com

Scalable Images

Post by Signsetc122051 »

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

Thanks!
Amberley
User avatar
JanetY
Support Team
Support Team
Posts: 63
Joined: Thu Jan 15, 2015 12:03 pm
Website: www.allprowebtools.com

Re: Scalable Images

Post by JanetY »

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. :D
DharaR161
Posts: 20
Joined: Fri Feb 27, 2015 3:15 pm
Website: Web Rose

Re: Scalable Images

Post by DharaR161 »

JanetY wrote: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. :D
What would the CSS code look like that goes with class?

Thanks.
User avatar
JanetY
Support Team
Support Team
Posts: 63
Joined: Thu Jan 15, 2015 12:03 pm
Website: www.allprowebtools.com

Re: Scalable Images

Post by JanetY »

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.
DharaR161
Posts: 20
Joined: Fri Feb 27, 2015 3:15 pm
Website: Web Rose

Re: Scalable Images

Post by DharaR161 »

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.
User avatar
JanetY
Support Team
Support Team
Posts: 63
Joined: Thu Jan 15, 2015 12:03 pm
Website: www.allprowebtools.com

Re: Scalable Images

Post by JanetY »

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"/>
User avatar
Paige
Support Team
Support Team
Posts: 461
Joined: Fri Feb 24, 2012 3:41 am
Website: www.allprowebtools.com
Location: Fort Collins, CO
Contact:

Re: Scalable Images

Post by Paige »

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.
Post Reply