如何去除 jQuery Mobile Listview 缩略图下的空白

Question

当我将图像应用于列表视图列表项时，缩略图应调整为 80x80 像素。它调整为 80 宽但不是 80 高，因此图像下方有一个间隙。也因为这个原因，整个列表项看起来偏移了，列表项中的文本太高了。

我知道如果我在列表项中有很多文本并且我将白色-space设置为正常，这会导致这个问题，但我认为这不适用于我这种情况是因为我没有足够的文字。

这是我从 w3 学校复制的代码，它们是我正在尝试做的事情的示例 (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2)。我修改了它以添加我的图像和一个普通的列表项。

<!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>

我知道我可以对图像应用 class，并在 class 中设置高度：80px；可行，但图像看起来有点拉伸。

知道为什么这对我不起作用，就像在 w3 示例中一样吗？

Answer 1

要修复列表项的高度，您需要覆盖一些默认值 css。

但是@jqmtricks 的解决方案在缩放缩略图以适应默认 80x80 框内的死点时保持纵横比，因此无论如何你都会有一个间隙，这对各种尺寸的缩略图都是最好的如果你有的话。

如果您希望缩略图为 80x80，无论图像的高度和宽度是否不相等

CSS

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

演示

https://jsfiddle.net/bwfnpz0q/

结果

如果要保持纵横比并固定列表项的整体高度

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;
}

演示

https://jsfiddle.net/cfvj992m/

结果

如果最后一个列表项有缩略图，则需要一些额外的 Css，因为它们的样式带有填充

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;
}

演示

https://jsfiddle.net/dfe14jpy/

结果

如何去除 jQuery Mobile Listview 缩略图下的空白

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

html

css

mobile

listview

jquery-mobile