I tried a Google search on this and still cannot figure out how to resize an image by its width for various mobile devices Here is my attempt CSS img test width 100 height auto HTML lt html gt lt head gt lt meta http-equiv content-type content text html charset ISO-8859-1 gt lt meta content width device-width initial-scale 1 0 maximum-scale 1 0 user-scalable 0 name viewport gt lt link rel stylesheet href includes style css gt lt head gt lt img class test src includes foo jpg gt But the image is still being loaded with its original scaling I am a css and html newb so any help would be great Edit Thanks for the responses Here is a revised version that now works HTML lt html gt lt head gt lt meta http-equiv content-type content text html charset ISO-8859-1 gt lt meta content width device-width initial-scale 1 0 maximum-scale 1 0 user-scalable 0 name viewport gt lt link rel stylesheet href includes style css gt lt head gt lt body width device-width gt lt img class test src includes buoy map jpg gt lt body gt

How do I automatically resize an image for a mobile site?

img {
  max-width: 100%;
}

Should set the image to take up 100% of its containing element.

~ Answered on 2011-10-05 13:37:56