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-1.png

Recent Features

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?...

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

  • Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

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!