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

Question

当我从服务器调用图像并将其加载到我的 ListView 中时，结果发现所需图像不适合图片框。从不同的服务器获取的图像具有不同的大小。

我的 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]');
    }
});

结果:

我的图片尺寸大约为:600x300。

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

Answer 1

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

如果它们是矩形且长宽比不同，它们会调整大小，但不会很好地对齐。在这种情况下，您可以使用 CSS 将调整后的图像水平和垂直居中，这样至少它们可以很好地对齐。

Here is a 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 将图像居中并填充 anchor ，使文本不会与图像重叠。

.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;
}