Responsive images?

by lint631 9 replies
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
Avatar of Unregistered
  • Profile picture of the author KCNL

    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:

    .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;
    .detailimage img {/* used to auto fit images to screen size */
        width: 100%;
    Then for the webpage use this HTML:
    <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.

    Sorry, I am too busy helping people to think of a cool signature!
  • Profile picture of the author aw4248
    try to adjust the width.. it will work for sure

Trending Topics