jQuery Mobile - 如何从服务器调整我的图像大小以适应列表视图图像框

Question

当我调用并将服务器中的图像加载到我的列表视图中时，发现所需的图像不适合图片框。从不同服务器获得的图像具有不同的大小。

我的HTML：

<ul data-role="listview" data-inset="true" id="listdata">

</ul>

我的jQuery：

$.ajax({
   type : 'GET',
   url : 'http://api.bacaberita.com/app/bacaberita/utama.html',
   async: true,
   dataType : 'json',
    success : function(result){
       allData = result.items;
       $.mobile.loading( "hide" );
       $.each(allData, function(i, data) {
           $('#listdata').append(
               '<li>' +
                   '<a href="#">' +
                       '<img src="'+ data.Img +'">' +
                       '<h2>'+ data.Title +'</h2>' +
                       '<p>'+ data.Post +'</p>' +
                   '</a>' +
               '</li>'
           );
       });
       $("#listdata").listview("refresh");
    },
    error: function(jqXHR, exception) {
        alert('Connection trouble [Error Code : initApp]');
    }
});

结果：

关于ex：600x300的图片大小。

如何让jQuery Mobile轻松创建80x80尺寸以适合图像

Answer 1

如果您的图像是方形的，它们将自动调整为80x80并且非常适合。

如果它们是矩形的并且具有不同的长宽比，它们将被调整大小，但不会很好地排列。在这种情况下，您可以使用CSS来水平和垂直居中重新调整尺寸的图像，因此至少它们排列很好。

  

这是 DEMO

为<UL>提供可在CSS中使用的类（has-odd-thumb）。在<LI>中，我为缩略图创建了一个容器，该容器可以绝对定位并使图像居中：

<ul data-role="listview" data-inset="true" class="has-odd-thumb">
    <li>
        <a href="#">
            <div class="thumbContainer">
                <img src="http://lorempixel.com/600/300/food/1" />
            </div>
            <h2>Food</h2>
            <p>600 x 300 sized icon</p>
        </a>
    </li>
</ul>

然后，CSS将缩略图容器放在左侧，使用margin: auto使图像居中，并填充锚点，使文本不与图像重叠。

.has-odd-thumb li a {
    padding-left: 90px !important;
}
.thumbContainer {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 90px;
}
.thumbContainer img {
    bottom: 0; left: 0;
    top: 0; right: 0;
    margin: auto;
    position: absolute;
    max-width: 80px;
    max-height: 78px;
}