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?

Jasper · Accepted Answer · 2011-11-25T17:18:15.617

26

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.

edited Nov 25 '11 at 17:18

answered Nov 22 '11 at 18:49

Jasper

75,717
14
151
146

10

I'd like to point out when using `width`, images will scale up or down to fill the container. If you were to use `max-width` instead, small images would not be scaled up, which may be desirable for some people. – zzz Jan 27 '12 at 20:19
I'm setting my image width to 100% and height to auto in my phonegap/jquery mobile/iphone application, but the image still looks cut off – farjam Dec 03 '12 at 15:53
@farjam Are you using a `viewport` meta tag? http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling/6457261#6457261 – Jasper Dec 03 '12 at 16:55
Yes, here is the full `viewport`: `` – farjam Dec 03 '12 at 17:14

score 0 · Answer 2 · answered Mar 07 '13 at 19:15

I have somthing similar and I had the same issue. I fixed it by removing some divs ...

Try this:

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

It works im my case (Tested on iPhone Simulator, Iphone 4, Android Emulator)

Header:

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

jQuery Mobile Grid with auto-resizing images

2 Answers2