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>

但我的图像(180X80像素)在iPhone屏幕上显示" 裁剪 " (320像素宽).

我怎样才能自动调整大小？

Answer 1

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

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

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