Auto Resizing Images for Mobile Screens

Auto Resizing Images for Mobile Screens

16:31 02 July in HTML

One thing that I found out very quickly when working with jQuery Mobile was that my images did not auto resize to the device. If I made an image that was fairly large and looked good on an iPad screen, but that same image would be too large or partially off the screen when viewed from an iPhone.

Remove Height and Width from your Img Tags

After doing some research I found a simple fix that I wanted to share. There are a couple of things you need to do but the first thing is to not assign width and height dimensions for your images. For example, when you are inserting an image inside your HTML, typically you assign a width and a height to the image you insert, but when you are working with multiple screen sizes you don’t want your images to always be that size. If you assign a width and height to the image then no matter what that image will be that width and height and will never resize to the size you need. So again, do not assign width and height attributes to any of the images you want to resize, and it should look something like this

  1. <img src="image.png"/>
Adding the CSS to make it all work

Now comes the important part, After you have removed all the width and height attributes from your img tags add this section to your main css file.

  1. img, object{
  2.     max-height:90%;
  3.     max-width:90%;
  4. }

You can change the max-height and max-width to whatever you want but we are addressing the objects within the img tags which in this case is the actual images and saying you have a max height/width of 90% that means you cannot go beyond 90% of the screen real-estate so if your image is wider than 90% it will auto resize but it will keep your image proportional. So I can take an image that would look great on an iPad and use it for an iPhone and not worry about it going off the screen.

Centering the image

One other thing I am asked a lot is how to center the image. If you are targeting mobile then most likely the browser will support HTML5 so you can use HTML5’s center tag to accomplish this like the following.

  1. <center><img src="image.png"/></center>

By wrapping the image inside of the center tags, it will always center my image in the middle of the screen. You can do this with any HTML element so it does not have to be an image.

Be Sociable, Share!

Jeff Batt
  • Isaac Petrascu 14:43h, 27 February Reply

    Thanks, this helps me a lot!

  • dchs 10:11h, 19 April Reply

    Thank you very much,
    it works like a charm.

  • Branden 15:41h, 27 June Reply

    Wonderful. Found many solutions online, but yours is the most simple and effective. Thank you!

    • Jeff Batt 16:41h, 27 June Reply

      Good glad you found it useful.

  • Allan 14:28h, 15 September Reply

    Finally! Many thanks! The only way, out of 10, that worked.

  • Stephanie 10:19h, 26 September Reply

    Had to quickly code this placeholder. Your instructions work perfectly. Thanks!

    • Jeff Batt 10:32h, 26 September Reply

      Great! Glad it helped.

  • Jorge 06:58h, 19 October Reply

    I was searching many days for a solution ! And this is the most simple & useful !
    Perfect ! Thanks a lot !!

  • Bogdan 22:36h, 18 September Reply

    wow. It`s working for me also! many many thanks.

Post A Comment