jQuery Mobile Grid avec des images à redimensionnement automatique

J'ai cette grille:

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

Mais mes images (180X80px) affichage "recadrée" sur l'écran de l'iPhone (320px de largeur).

Comment puis-je redimensionner automatiquement?

source d'informationauteur Fabio B.

  1. 25

    Vous pouvez définir le CSS de vos images automatiquement prendre la totalité de l'espace horizontal disponible sur l'écran:

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

    Ceci permettra de définir chaque image afin de remplir complètement son élément parent (<div class="ui-bar">) horizontalement tout en conservant ses proportions.

  2. 0

    J'ai quelque chose de similaire et j'ai eu le même problème.
    Je l'ai corrigé en supprimant certains divs ...

    Essayez ceci:

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

    Il fonctionne im mon cas (Testé sur Simulateur d'iPhone, l'Iphone 4, l'Émulateur Android)

    En-tête:

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