Question

我正在使用jQuery mobile中的listviews。

我用来覆盖jQuery mobile使用的默认值的CSS代码是：

<style type="text/css">
.has-odd-thumb li a {
padding-left: 90px !important;
padding-top: 0px;
padding-bottom: 0px;
}
.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.thumbContainer img {
    display: block;
    margin: auto;
    max-height: 80px;
}
</style>

这是为了让我的非方形图像在我列表中不同项目中的缩略图时正确匹配。

这是我的列表中的代码（简化以供快速参考）：

<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search..." data-inset="true" class="has-odd-thumb">
<li><a href="#" id="1" class="item-lista">
<div class="thumbContainer">
<img src="img/test.jpg">
</div>
<h2><i>Item</i></h2>
<p>Description text</p>
</a></li></ul>

到目前为止一切正常，我将图像安装在80px方形缩略图内，但我的问题是如果图像更宽（一个矩形），它不会出现在缩略图的方形空间中心。它看起来与左边对齐。 如何将图像置于该方形空间的中心？

由于

编辑：

enter image description here

Answer 1

Example

.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.thumbContainer img {
    position: relative;
    left: -50%;
    margin-left: 50%;
    display: block;
    margin: auto;
    max-height: 80px;
}

这个答案不包括纵向矩形......这就是我推荐背景图片或Javascript方法的原因。

Answer 2

<强> Demo

正如这里所承诺的那样，一些简单的JQuery可以用正确的比率来覆盖你的缩略图。以他们为中心。

$(document).ready(function () {
    // Find thumbnail containers
    $('.thumbContainer').each(function () {
        // Get current thumbnail container
        var thumb = $(this);
        // Get current thumbnail image
        var img = thumb.children('img');
        // Calculate image ratio
        var ratio = img.innerWidth() / img.innerHeight();
        var newW, newH;
        // Calculate new width & height
        if (ratio >= 1) {
            newH = thumb.innerHeight();
            newW = newH * ratio;
        } else {
            newW = thumb.innerWidth();
            newH = newW / ratio;
        }
        // Apply new width & height
        img.width(newW);
        img.height(newH);
        // Calculate and apply offsets  
        // You can replace thumb.outerHeight / width with exact values if you want
        img.css('top', (thumb.outerHeight() - newH) / 2);
        img.css('left', (thumb.outerWidth() - newW) / 2);
    });
});

Answer 3

您可以将图像设置为背景图像并使用：

background-size: cover;

http://www.w3schools.com/cssref/css3_pr_background-size.asp

...或使用一些Javascript计算确切的比例。

在jQuery移动列表视图中水平对齐缩略图

3 个答案: