如何摆脱空白下的jQuery Mobile Listview缩略图 [英] How do I get rid of whitespace under jQuery Mobile Listview thumbnail image
问题描述
当我将图片应用到列表视图列表项时，缩略图应调整为80x80像素。它调整到80宽，但不是80的高度，因为这是一个缺口下面的图像。此外，整个列表项目看起来偏移，因为这样，文本在列表项中过高。
>
我知道如果我在列表项中有很多文本，并且我将白色空间设置为正常，这将导致这个问题，但我不认为这适用于我在这种情况下，我没有足够的文本。
这里是从w3学校复制的代码，他们的例子，我想做的（
结果
如果最后一个列表项有缩略图，需要一些额外的CSS，因为它们有填充样式
CSS
.ui-li- thumb，.ui-listview> li.ui-last-child> a.ui-btn {//也是最后一个列表项目
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：{
margin-top：-18px;
}
.ui-listview .ui-li-have-thumb> .ui-btn> img {
max-width：100px！important;
width：100px;
height：60px;
}
ul li：last-child a {//最后一个列表项从顶部和底部删除填充
padding-bottom：0px;
padding-top：0px;
}
演示
https://jsfiddle.net/dfe14jpy/
结果
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?
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
这篇关于如何摆脱空白下的jQuery Mobile Listview缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
