Images, max-width, and Mobile

By  on  

Many web developers prefer to keep as much control over the applications, especially when it comes down to how the application displays on a mobile device. I'll often see developers prevent zooming in mobile browsers, allowing them to manage display size:


A useful snippet for any mobile developer. Another useful snippet, this one a small CSS helper, ensures that your images don't exceed the fixed width on mobile devices:

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	img { max-width: 100%; }
}

By setting the max-width property of the image, the image cannot bleed to the right of the page, regardless of its size. You can add that same max-width property to images when it comes time for print too:

@media print {
	img { max-width: 100%; }
}

Keep this snippet handy for your current and future mobile web and print endeavors; it's just another CSS directive to show your mobile and print users that you care!

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    Implement jQuery’s hover() Method in MooTools

    jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here's how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other...

  • By
    Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

Discussion

  1. Neal G

    If your site has a fixed width of, say 960px why not just do a media query like this? That way you’re not targeting specific screen dimensions (Many Android devices have dimensions other than the iPhone & iPad’s)

    @media only screen and (max-width: 960px) {
    img { max-width: 100%; }
    }
  2. Bartek Szopka

    Hi,

    While max-width on images seem quite popular technique for responsive mobile designs I had quite important issue with it when developing for older phones such as BlackBerries and Nokias.

    When max-width was applied for an image that was bigger than specified maximum the width of the image was correctly scaled down, but not the height – aspect ratio was not kept. It didn’t happen when width was defined as 100%, so it’s clearly a bug with max-height in these browsers.

    But it simply makes this approach useless for wider mobile devices support.

    • Gabe

      I’ve encountered this problem on mobile and certain desktop designs.

      I have always used width: auto, height: auto, max-width: VALUEpx. Seems to do the trick.

  3. Don’t forget to add max-height:auto, I think it was IE7 that did not properly scale the image when that’s not present.

  4. All great points gentlemen! Thanks for sharing!

  5. Bartek Szopka

    Honestly, I can’t get any of the solutions with width or height auto to get max-width: 100% with correct aspect ratio working on Blackberry (Bold 9700 with OS version 5).

    If any of you guys can provide a jsfiddle or some other example that I could try, I’d be glad to check it.

  6. peter

    A great place to start a responsive design is this:

    http://www.getskeleton.com/#grid

    Just add:

    and the images scale to fit whatever block it is in…

  7. peter

  8. peter

    img class="scale-with-grid" src="images/dinna-sol.jpg" /

  9. That viewport meta tag saved my life. I thought I was CSSing wrong.

  10. Hi David,

    I’ve created a fluid template for emails to mobile devices, just wondering if you would know how to set a max-size rule on a div in the email that only is applied when the email is viewed in a desktop browser.

    If I set a max-width the fluidity of the template is destroyed. (ie. iphone mail, gmail, android mail and others start using the max-width instead of the device-max-width rule.)

    Any ideas?
    Cheers,
    Mart.

  11. I need some help here. How can i make the image size auto and maximum width or height? Can i find some plugin for WP?

  12. Hi, This is solve the my issue, but another issue is occurs.

    For example :
    Original image width is 50px, when I have put max-width:100%, when open it my ipad then width is expanded to screen width. Total image quality is changed. How can we solve this issue ?

    Thanks in Advance,
    Anil Kumar Panigrahi

  13. Hi Anil,

    The reason that this is happening is your class containing ‘max-width:100%’ is basically fitting it to the screen.

    Try removing this and it will default back to its original setting.

    If the Image quality is your issue, the only solution in this case is to….

    A. Make a CSS Class with a set max-width which you are happy with going back and forth testing.
    B. Live with the distorted image.
    C. Get a high res image and leave in the max width class.

    Preferably the latter.

    Thanks,

  14. With regards to the height issue: just smash in some jQuery to remove the height:

    $('img').css('height,'')
  15. Salem

    media print min/max-width not working on IE 11

  16. Kim

    Thank you for this simple code – it worked perfect for my iPhone and iPad! Exactly what I was looking for.

  17. hey I’m having problem with not the size of the photo but the orientation of the photo.

    As I view my website on my PC or my LAPTOP, or my Driod Phone all my images are upright and correct in everyway.

    ***BUT as I view my website on my iphone, all the photos are flipped on its side, clockwise.

    I was told a CSS code could solve my huge problem.

    HELP!!!

  18. In our case the image width is scaled properly but not the image ratio (it looks vertically stretched)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!