Wednesday, November 14, 2012

Mobile web - image width

If you have very wide images, they are treated differently by Android and iPhone. Android will make the text full width and will have the image sticking out past the text. iPhone, on the other hand, will scale everything to the width of the widest image.

To make your text take up all available space, add the following to your mobile css file:
img {max-width:100%;height:auto !important;}
You need to enforce height in case the image has height set, which will cause it to loose aspect ratio.

No comments:

Post a Comment