jQuery Mobile Grid with auto-resizing images

Question

I have this grid:

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

But my images (180X80px) display "cropped" on the iPhone screen (320px width).

How can I auto resize them?

Answer 1

You can set the CSS of your images to automatically take-up all the horizontal space available on the screen:

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

This will set each image to completely fill its parent element (<div class="ui-bar">) horizontally while maintaining its aspect ratio.