Treehouse

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!

ydkjs-2.png

Recent Features

  • 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,...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

  • Style Textarea Resizers

    Modern browsers are nice in that they allow you to style some odd properties.  Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task.  Did you know you can also restyle the textarea resizer in WebKit...

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

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