Responsive images?

lint631 · 8th Jan 2013, 09:23 PM

Is there an easy way to make an image responsive? I designed a site for a client:

Snow Removal « NLI

which is a responsive theme. The problem is when I insert images they don't re-size correctly to fit on my iPhone.

Any help would be great, thanks!

KCNL · 9th Jan 2013, 04:09 AM

Hi,

Have you tried setting the width to 100% ?

lint631 · 9th Jan 2013, 08:41 AM

I just did and it works adding this width="100%".

Is there a way to set a max width on it in pixels? With width="100%" it stretches the image over the original size but on a mobile device it re-sizes perfectly! Half way there!

Valdor Kiebach · 9th Jan 2013, 10:08 AM

You could use CSS to format a special div class for the image and then put the image in this div:

CSS:

Code:

.detailimage {/* used to auto fit images to screen size */
    width: 75%; /* this is to set the maximum width of the page the image takes up */
    text-align: center;
    margin-right:0;
    margin-left:0;
}

.detailimage img {/* used to auto fit images to screen size */
    width: 100%;
}

Then for the webpage use this HTML:

Code:

<div class="detailimage"><img src="yourimage.jpg"></div>

Jay Moreno · 9th Jan 2013, 10:20 AM

You should really use an image sized specifically for mobile usage instead of stretching one primed for a desktop or tablet browser

Basically you're forcing your mobile visitor to download a few 100kb for no reason at all, and then have the phone stretch the image to a 10th of its size.

This just slows down the user accessing your pages especially on pages with lots of images.

That aside i would use something similar to what Valdor shared -

HTML Code:

.divname img {
    width: 100%;
    height: auto;
 }

However note the height: auto - this is used to also keep the images aspect ratio.

This makes sure the image height also scales proportionately as the width increases or decreases - this will prevent your image image looking distorted especially in landscape view.

To set max limits you can add max-width to your css.

HTML Code:

.divname img {
    max-width: 17.5em;
    width: 100%;
    height: auto;
 }

Note that for mobile you should also be using em's over pixel's - 1em = 16px.

Hope that helps.

Jay

lint631 · 16th Jan 2013, 04:45 PM

Great thanks for all your help! The width adjustment seems to work fine and is easy to implement.

scamsel · 16th Jan 2013, 06:09 PM

Originally Posted by Jay Moreno

....You should really use an image sized specifically for mobile usage instead of stretching one primed for a desktop or tablet browser....

hey jay, what is a good 'standard' size to use for mobile sites, iyo? 320 x 480?

aw4248 · 17th Jan 2013, 07:56 AM

try to adjust the width.. it will work for sure

Jay Moreno · 17th Jan 2013, 01:49 PM

Originally Posted by scamsel

hey jay, what is a good 'standard' size to use for mobile sites, iyo? 320 x 480?

Hi Scamsel,

Really depends on what you are trying to do - the 320x480 is around full screen size for non retina usage on smart phones.

Also remember the bigger the image the bigger the file size. You will also need to take into account are you making the image stretchy and whats its purpose - so that when it goes into landscape mode do you really want it to stretch the full width too.

So if the image is a logo, a coupon, an inline image related to a post or perhaps a slideshow or gallery image the purpose of the image will determine the size.

Sorry its vague but hopefully you can see where i am coming from...

scamsel · 18th Jan 2013, 11:01 AM

Originally Posted by Jay Moreno

....

Really depends on what you are trying to do - the 320x480 is around full screen size for non retina usage on smart phones.

...

yep i follow you jay, thanks. makes sense. i was thinking more inline of like coupon or landing page, so that its essentially just one image.

8th Jan 2013, 09:23 PM	#1
lint631 MobileWebRockstar War Room Member Join Date: 2011 Location: New York Posts: 253 Thanks: 41 Thanked 52 Times in 37 Posts	Responsive images? Share on: Is there an easy way to make an image responsive? I designed a site for a client: Snow Removal « NLI which is a responsive theme. The problem is when I insert images they don't re-size correctly to fit on my iPhone. Any help would be great, thanks!
	WPMobileSalesPro - Mobile Web Sales Tool

9th Jan 2013, 04:09 AM	#2
KCNL Active Warrior War Room Member Join Date: 2010 Posts: 83 Thanks: 23 Thanked 29 Times in 24 Posts	Re: Responsive images? Share on: Hi, Have you tried setting the width to 100% ?

9th Jan 2013, 08:41 AM	#3
lint631 MobileWebRockstar War Room Member Join Date: 2011 Location: New York Posts: 253 Thanks: 41 Thanked 52 Times in 37 Posts	Re: Responsive images? Share on: I just did and it works adding this width="100%". Is there a way to set a max width on it in pixels? With width="100%" it stretches the image over the original size but on a mobile device it re-sizes perfectly! Half way there!
	WPMobileSalesPro - Mobile Web Sales Tool

9th Jan 2013, 10:08 AM	#4
Valdor Kiebach Howdy War Room Member Join Date: 2008 Location: England Posts: 681 Thanks: 103 Thanked 150 Times in 124 Posts	Re: Responsive images? Share on: You could use CSS to format a special div class for the image and then put the image in this div: CSS: Code: .detailimage {/* used to auto fit images to screen size / width: 75%; / this is to set the maximum width of the page the image takes up / text-align: center; margin-right:0; margin-left:0; } .detailimage img {/ used to auto fit images to screen size */ width: 100%; } Then for the webpage use this HTML: Code: <div class="detailimage"><img src="yourimage.jpg"></div>

9th Jan 2013, 10:20 AM	#5
Jay Moreno Mobile+WP = JumpMobi.com War Room Member Join Date: 2009 Location: San Antonio, Tx Posts: 1,271 Thanks: 301 Thanked 449 Times in 309 Posts	Re: Responsive images? Share on: You should really use an image sized specifically for mobile usage instead of stretching one primed for a desktop or tablet browser Basically you're forcing your mobile visitor to download a few 100kb for no reason at all, and then have the phone stretch the image to a 10th of its size. This just slows down the user accessing your pages especially on pages with lots of images. That aside i would use something similar to what Valdor shared - HTML Code: .divname img { width: 100%; height: auto; } However note the height: auto - this is used to also keep the images aspect ratio. This makes sure the image height also scales proportionately as the width increases or decreases - this will prevent your image image looking distorted especially in landscape view. To set max limits you can add max-width to your css. HTML Code: .divname img { max-width: 17.5em; width: 100%; height: auto; } Note that for mobile you should also be using em's over pixel's - 1em = 16px. Hope that helps. Jay
	Sorry, I am too busy helping people to think of a cool signature!

16th Jan 2013, 04:45 PM	#6
lint631 MobileWebRockstar War Room Member Join Date: 2011 Location: New York Posts: 253 Thanks: 41 Thanked 52 Times in 37 Posts	Re: Responsive images? Share on: Great thanks for all your help! The width adjustment seems to work fine and is easy to implement.
	WPMobileSalesPro - Mobile Web Sales Tool

17th Jan 2013, 07:56 AM	#8
aw4248 Active Warrior Join Date: 2012 Posts: 55 Thanks: 1 Thanked 9 Times in 7 Posts	Re: Responsive images? Share on: try to adjust the width.. it will work for sure