具有自动调整图像大小的 jQuery Mobile Grid

Question

我有这个网格：

<div class="ui-grid-b">
    <div class="ui-block-a">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-c">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-a">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-b">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
    <div class="ui-block-c">
        <div class="ui-bar"> <a href="xxx.htm">
        <img alt="alt..." src="image.jpg" />
        </a>

        </div>
    </div>
</div>

但我的图像 (180X80px) 在 iPhone 屏幕上显示“cropped”（320px 宽度）。

如何自动调整它们的大小？

Answer 1

我有类似的东西，我也有同样的问题。 我通过删除一些 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>

它适用于我的情况（在 iPhone 模拟器、Iphone 4、Android 模拟器上测试）

标题：

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

CSS：

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

Answer 2

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

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

这会将每个图像设置为水平完全填充其父元素 (<div class="ui-bar">)，同时保持其纵横比。