我如何在jQuery Mobile的列表视图缩略图摆脱空白 [英] How do I get rid of whitespace under jQuery Mobile Listview thumbnail image
问题描述
当我申请一个图像到ListView列表项的缩略图应该调整到80x80px。它调整为80宽，但不是80的高度，并因为这个有图像下面的差距。也是整个列表项看起来是因为这个偏移，文字是在列表中的项目太高。
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.
下面是code，我从学校W3复制，他们对我所试图做（的 http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_thumbs2 ）。我已经修改了它加入我的图片和正常的列表项。
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>
我知道我可以申请一类图像，并在类集高度：80px;
这工作，但图像看起来有点捉襟见肘。
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.
任何想法，为什么犯规这项工作对我来说，因为它在W3的例子呢？
Any ideas why doesnt this work for me as it does in the w3 examples?
推荐答案
要解决，你需要重写一些默认的CSS的列表项的高度。
To fix the height of the list items you need to Override some of the default css.
然而在@ jqmtricks解决方案保持纵横比的同时缩放缩略图符合预设80×80盒内死点，所以你会得到一个缺口不管是什么，那就是最好的各种缩略图的大小，如果你有什么。
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.
如果您要的缩略图无论被80X80如果图像的高度和宽度不相等
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;
}
演示
https://jsfiddle.net/bwfnpz0q/
结果
如果你想保持纵横比和修复列表项的整体高度
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;
}
演示
https://jsfiddle.net/cfvj992m/
结果
如果最后一个列表项的缩略图需要一些额外的CSS，因为他们得到了填充风格
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;
}
演示
https://jsfiddle.net/dfe14jpy/
结果
这篇关于我如何在jQuery Mobile的列表视图缩略图摆脱空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
