title: How do I automatically resize an image for a mobile site?
body: <p>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:</p>
  
  <p>CSS:</p>
  
  <pre><code>img.test {
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>But the image is still being loaded with its original scaling. I am a css and html newb so any help would be great!</p>
  
  <p>Edit:</p>
  
  <p>Thanks for the responses. Here is a revised version that now works. </p>
  
  <p>HTML: </p>
  
  <pre><code>   &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;
  </code></pre>