Responsive images?

by 9 comments
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

Next Topics on Trending Feed