How do I get rid of whitespace under jQuery Mobile Listview thumbnail image

问题

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.

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.

Here is code I copied from w3 schools, their example of what I am trying to do (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2). I have modified it to add my images and a normal list item.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <h2>List With Thumbnails and Text</h2>
    <ul data-role="listview" data-inset="true">
      <li>
        <a href="#">
        <img src="images/aileens1.jpg">
        Text
        </a>
      </li>
      <li>
        <a href="#">
        <img src="images/bartra1.PNG">
        Some text
        </a>
      </li>
       <li>
        <a href="#">
        Some text
        </a>
      </li>
    </ul>
  </div>
</div> 

</body>
</html>

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.

Any ideas why doesnt this work for me as it does in the w3 examples?

回答1:

To fix the height of the list items you need to Override some of the default css.

However the solution over @ jqmtricks keeps the aspect ratio while scaling the thumbnail to fit dead center within the default 80x80 box so you will a get a gap no matter what, and that is best with all sorts of sizes of thumbnails if you have any.

If you want the thumbnail to be 80x80 regardless if the height and width of the image are not equal

CSS

.ui-listview .ui-li-has-thumb>.ui-btn>img { 
max-width:80px !important;
width: 80px;
height: 80px;
}

Demo

https://jsfiddle.net/bwfnpz0q/

Result

If you want to keep the aspect ratio and fix the overall height of the list items

CSS

.ui-li-has-thumb { // any list item that has a thumbnail
height:63px;
}
.ui-li-has-thumb .ui-btn-icon-right:after { // the arrow postion
margin-top:-18px;   
}

.ui-listview .ui-li-has-thumb>.ui-btn>img { //the thumnail size
max-width:100px !important;
width: 100px;
height: 60px;
}

Demo

https://jsfiddle.net/cfvj992m/

Result

If the last list item has a thumbnail some additional Css is needed because they get styled with padding

CSS

 .ui-li-has-thumb, .ui-listview>li.ui-last-child>a.ui-btn { // as bove with also the last list item
 height:63px;
 }

.ui-last-child .ui-btn-icon-right:after { // last list items arrow
 margin-top:-11px !important;   
 }

.ui-li-has-thumb .ui-btn-icon-right:after {
margin-top:-18px;   
}

.ui-listview .ui-li-has-thumb>.ui-btn>img { 
max-width:100px !important;
width: 100px;
height: 60px;
}

ul li:last-child a { // last list items removing padding from top and bottom
 padding-bottom: 0px;
 padding-top:0px;
}

Demo

https://jsfiddle.net/dfe14jpy/

Result