Image 具有自动调整图像大小的jQuery移动网格

我有一个网格：

但我的图像（180X80px）在iPhone屏幕上显示为“裁剪”（320px宽）

---

如何自动调整大小？

您可以将图像的CSS设置为自动占用屏幕上所有可用的水平空间：

<style>
.ui-grid-b img {
    width  : 100%;
    height : auto;
}
</style>

.ui-grid-b img{
宽度：100%；
高度：自动；
}

---

这将设置每个图像在水平方向上完全填充其父元素（

），同时保持其纵横比。

我有一些类似的问题，我也有同样的问题。 我通过删除一些div来修复它

试试这个：

<div class="ui-grid-b">

    <a href="xxx.htm">
    <img alt="alt..." src="image.jpg" />
    </a>

    <a href="xxx.htm">
    <img alt="alt..." src="image.jpg" />
    </a>

</div>

---

我想指出的是，当使用

宽度

时，图像会放大或缩小以填充容器。如果改为使用

max width

，小图像将不会放大，这可能是某些人所希望的。我在phonegap/jquery mobile/iphone应用程序中将图像宽度设置为100%，高度设置为auto，但图像看起来仍然是剪切的off@farjam您是否使用

视口
元标记？是的，这是完整的
视口
：

    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

   .ui-grid-b img {
       width  : 100%;
       height : auto;
   }