title: jQuery Mobile Grid with auto-resizing images
body: <p>I have this grid:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="ui-grid-b"&gt;
      &lt;div class="ui-block-a"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-b"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-c"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-a"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-b"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-c"&gt;
          &lt;div class="ui-bar"&gt; &lt;a href="xxx.htm"&gt;
          &lt;img alt="alt..." src="image.jpg" /&gt;
          &lt;/a&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But my images (180X80px) display "<em>cropped</em>" on the iPhone screen (320px width).</p>
  
  <p><strong>How can I auto resize them?</strong></p>