title: How do I get rid of whitespace under jQuery Mobile Listview thumbnail image
body: <p>When I apply an image to a listview list item the thumbnail should resize to 80x80px. It resizes to 80 wide but not 80 in height and because of this there is a gap below the image. Also the whole list item looks offset because of this, the text is up too high in the list item. </p>
  
  <p><img src="https://i.stack.imgur.com/VxEAx.png" alt="enter image description here"></p>
  
  <p>I am aware that if I had a lot of text in the list item and I had set the white-space to be normal, this would cause this issue but I dont think that applies to me in this case as I dont have enough text.</p>
  
  <p>Here is code I copied from w3 schools, their example of what I am trying to do (<a href="http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2" rel="nofollow noreferrer">http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2</a>). I have modified it to add my images and a normal list item.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div data-role="page" id="pageone"&gt;
    &lt;div data-role="main" class="ui-content"&gt;
      &lt;h2&gt;List With Thumbnails and Text&lt;/h2&gt;
      &lt;ul data-role="listview" data-inset="true"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
          &lt;img src="images/aileens1.jpg"&gt;
          Text
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;
          &lt;img src="images/bartra1.PNG"&gt;
          Some text
          &lt;/a&gt;
        &lt;/li&gt;
         &lt;li&gt;
          &lt;a href="#"&gt;
          Some text
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know I can apply a class to the images and in the class set height: 80px; 
  That works but the image looks a bit stretched.</p>
  
  <p>Any ideas why doesnt this work for me as it does in the w3 examples?</p>