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

当我从服务器调用图像并将其加载到我的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]');
    }
});

$.ajax({
键入：“GET”，
网址：'http://api.bacaberita.com/app/bacaberita/utama.html',
async:true，
数据类型：“json”，
成功：功能（结果）{
allData=结果项；
$.mobile.load（“隐藏”）；
$。每个（所有数据，函数（i，数据）{
$（'#listdata'）。追加(
“
”+
'' +
“
”
);
});
$（“#listdata”）.listview（“刷新”）；
},
错误：函数（jqXHR，异常）{
警报（“连接故障[错误代码：initApp]”）；
}
});

结果:

我的图片大小约为ex:600x300

---

如何获取jQuery Mobile可以轻松创建80x80大小以适合图像

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

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

这里有一个

给

一个可以在CSS中使用的类（

有奇数拇指

）。在

中，我为缩略图创建了一个容器，该容器可以绝对定位并使图像居中：

<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>

---

设置图像标记的高度和宽度^This。丑陋，但真实。理想情况下，您可以自己编写服务器代码，以便调整大小，但这是一个完美的世界，我想不太合适。感谢您的代表…很好的帮助…：）它应该来自提供此大小图像的服务器。但是web应用程序已经在运行，服务器上已经有数百个图像。唯一最方便的方法是我建议在图像元素上添加一个height属性。不理想，但它会起作用。（如果您不知道，它会自动调整宽度大小，以适合您使用的任何高度，因此不必担心该值。）

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