I added some images to my Design page. How do I make them scalable so they view correctly on mobile sites?
Thanks!
Amberley
Scalable Images
-
- Posts: 5
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Tue Oct 06, 2015 9:33 pm
- Website: www.signsetccolorado.com
- JanetY
- Support Team
- Posts: 63
- Joined: Thu Jan 15, 2015 12:03 pm
- Website: www.allprowebtools.com
Re: Scalable Images
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.
Here is an example: <img class="img-responsive" src="path and name to your photo" alt="my photo description">
This should solve your issue.
Re: Scalable Images
What would the CSS code look like that goes with class?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.
Thanks.
- JanetY
- Support Team
- Posts: 63
- Joined: Thu Jan 15, 2015 12:03 pm
- Website: www.allprowebtools.com
Re: Scalable Images
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.
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.
Re: Scalable Images
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.
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.
- JanetY
- Support Team
- Posts: 63
- Joined: Thu Jan 15, 2015 12:03 pm
- Website: www.allprowebtools.com
Re: Scalable Images
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.
So for your example:
Code: Select all
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
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"/>
- Paige
- Support Team
- Posts: 461
- Joined: Fri Feb 24, 2012 3:41 am
- Website: www.allprowebtools.com
- Location: Fort Collins, CO
- Contact:
Re: Scalable Images
One trick I do when I'm doing a rush job is to use this CSS:
This will apply to ALL images on the site and it less time consuming then apply the class to every single image tag.
Code: Select all
img {
height: auto;
max-width: 100%;
}