Responsive images?

Profile picture of the author lint631 by
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!
#mobile marketing #images #responsive

  • Profile picture of the author KCNL
    Hi,

    Have you tried setting the width to 100% ?
  • Profile picture of the author lint631
    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!
  • Profile picture of the author Valdor Kiebach
    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>
  • Profile picture of the author Jay Moreno
    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
  • Profile picture of the author lint631
    Great thanks for all your help! The width adjustment seems to work fine and is easy to implement.
  • Profile picture of the author scamsel
    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?
  • Profile picture of the author aw4248
    try to adjust the width.. it will work for sure
  • Profile picture of the author Jay Moreno
    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...
  • Profile picture of the author scamsel
    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.

Next Topics on Trending Feed