Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > The Warrior Forum > Mobile Marketing
Register Blogs Social Groups Advertise with usHelp Desk

Reply
LinkBack Thread Tools
Unread 8th January 2013, 09:23 PM   #1
MobileWebRockstar
War Room Member
 
lint631's Avatar
 
Join Date: 2011
Location: New York
Posts: 253
Thanks: 41
Thanked 51 Times in 36 Posts
Default Responsive images?

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!

lint631 is offline   Reply With Quote
Unread 9th January 2013, 04:09 AM   #2
Active Warrior
War Room Member
 
Join Date: 2010
Posts: 83
Thanks: 23
Thanked 29 Times in 24 Posts
Default Re: Responsive images?

Hi,

Have you tried setting the width to 100% ?
KCNL is offline   Reply With Quote
Unread 9th January 2013, 08:41 AM   #3
MobileWebRockstar
War Room Member
 
lint631's Avatar
 
Join Date: 2011
Location: New York
Posts: 253
Thanks: 41
Thanked 51 Times in 36 Posts
Default Re: Responsive images?

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!

lint631 is offline   Reply With Quote
Unread 9th January 2013, 10:08 AM   #4
Howdy
War Room Member
 
Valdor Kiebach's Avatar
 
Join Date: 2008
Location: England
Posts: 1,106
Thanks: 79
Thanked 118 Times in 100 Posts
Default Re: Responsive images?

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>

Valdor Kiebach is offline   Reply With Quote
Unread 9th January 2013, 10:20 AM   #5
Mobile+WP = JumpMobi.com
War Room Member
 
Jay Moreno's Avatar
 
Join Date: 2009
Location: San Antonio, Tx
Posts: 1,244
Thanks: 298
Thanked 439 Times in 304 Posts
Default Re: Responsive images?

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


Stop Building Blah! Mobile Sites Like Everyone Else!
Go Pro! Make Premium Mobile Sites In Minutes!

WSO Ends Today - Only 8 Copies Left - Click Here
Jay Moreno is offline   Reply With Quote
Unread 16th January 2013, 04:45 PM   #6
MobileWebRockstar
War Room Member
 
lint631's Avatar
 
Join Date: 2011
Location: New York
Posts: 253
Thanks: 41
Thanked 51 Times in 36 Posts
Default Re: Responsive images?

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

lint631 is offline   Reply With Quote
Unread 16th January 2013, 06:09 PM   #7
Active Warrior
 
scamsel's Avatar
 
Join Date: 2009
Posts: 40
Thanks: 1
Thanked 7 Times in 5 Posts
Default Re: Responsive images?

Quote:
Originally Posted by Jay Moreno View Post
....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?
scamsel is offline   Reply With Quote
Unread 17th January 2013, 07:56 AM   #8
Active Warrior
 
Join Date: 2012
Posts: 56
Thanks: 2
Thanked 9 Times in 7 Posts
Default Re: Responsive images?

try to adjust the width.. it will work for sure
aw4248 is offline   Reply With Quote
Unread 17th January 2013, 01:49 PM   #9
Mobile+WP = JumpMobi.com
War Room Member
 
Jay Moreno's Avatar
 
Join Date: 2009
Location: San Antonio, Tx
Posts: 1,244
Thanks: 298
Thanked 439 Times in 304 Posts
Default Re: Responsive images?

Quote:
Originally Posted by scamsel View Post
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...


Stop Building Blah! Mobile Sites Like Everyone Else!
Go Pro! Make Premium Mobile Sites In Minutes!

WSO Ends Today - Only 8 Copies Left - Click Here
Jay Moreno is offline   Reply With Quote
Unread 18th January 2013, 11:01 AM   #10
Active Warrior
 
scamsel's Avatar
 
Join Date: 2009
Posts: 40
Thanks: 1
Thanked 7 Times in 5 Posts
Default Re: Responsive images?

Quote:
Originally Posted by Jay Moreno View Post
....

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.
scamsel is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > The Warrior Forum > Mobile Marketing

Bookmarks

Tags
images, responsive

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 03:39 PM.