Question

当我将图像应用于列表视图列表项时，缩略图应调整为80x80px。它调整到80宽但不高80，因此在图像下面有一个间隙。此外，整个列表项看起来偏移，因此，列表项中的文本太高。

enter image description here

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

以下是我从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>

我知道我可以将一个类应用于图像和类设置高度：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/

<强>结果

enter image description here

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

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/

<强>结果

enter image description here

如果最后一个列表项有缩略图，则需要一些额外的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/

<强>结果

enter image description here

如何摆脱jQuery Mobile Listview缩略图下的空白

1 个答案: