O'Reilly

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!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

Incredible Demos

  • :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

  • Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

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.

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

Recently on David Walsh Blog

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....