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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

  • Create a Clearable TextBox with the Dojo Toolkit

    Usability is a key feature when creating user interfaces;  it's all in the details.  I was recently using my iPhone and it dawned on my how awesome the "x" icon is in its input elements.  No holding the delete key down.  No pressing it a...

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

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...