title: jQuery Mobile images auto-resizing
body: <p>I'm new to this community: I'm trying to use jQuery Mobile to create a simple GUI in Windows Phone style.</p>
  
  <p>I want to create some tiles with images and then I must adjust them to the screen width: I tried to do this with the style rule " style="width: 100%;" " but the border of the image is too heavy.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Tiles Test&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, height=device-height"&gt;
  
      &lt;link rel="stylesheet" href="Framework\Theme\Metro.css" /&gt;
      &lt;link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" /&gt; 
  
      &lt;script src="Framework\JQ\1.10.1.js"&gt;&lt;/script&gt; 
      &lt;script src="Framework\JQM\1.3.0.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" id="Menu"&gt;
  
          &lt;div data-role="header" id="Menu\Header"&gt;
  
              &lt;h1&gt;
                  Menu
              &lt;/h1&gt;
  
              &lt;a href="#" data-role="button" data-icon="gear" data-iconpos="notext"&gt;&lt;/a&gt;
  
          &lt;/div&gt;
  
          &lt;div data-role="content" id="Menu\Content" style="padding: 2%"&gt;
  
              &lt;div class="ui-grid-a"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;a href="#" data-role="button" style="background: #FFCC33;"&gt;&lt;img src="image.png" style="width: 100%;" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ui-block-b"&gt;
                      &lt;a href="#" data-role="button" style="background: #FFCC33; padding: 0px;"&gt;&lt;img src="image.png" style="width: 100%;" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>But the result is: <a href="http://img801.imageshack.us/img801/9474/6aoq.png" rel="nofollow">http://img801.imageshack.us/img801/9474/6aoq.png</a></p>
  
  <p>How can I fit the image to the screen size? (Something like this; <a href="http://img19.imageshack.us/img19/1305/f1y4.png" rel="nofollow">http://img19.imageshack.us/img19/1305/f1y4.png</a>)</p>