Images, max-width, and Mobile
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!
If your site has a fixed width of, say
960pxwhy 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%; } }Hi,
While
max-widthon 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-widthwas 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 as100%, so it’s clearly a bug withmax-heightin these browsers.But it simply makes this approach useless for wider mobile devices support.
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.
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.All great points gentlemen! Thanks for sharing!
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.
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…
img class="scale-with-grid" src="images/dinna-sol.jpg" /That viewport meta tag saved my life. I thought I was CSSing wrong.
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.
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?
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
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,
With regards to the height issue: just smash in some jQuery to remove the height:
$('img').css('height,'')media print min/max-width not working on IE 11
Thank you for this simple code – it worked perfect for my iPhone and iPad! Exactly what I was looking for.
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!!!
In our case the image width is scaled properly but not the image ratio (it looks vertically stretched)
Don’t forget to add
max-height:auto