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) affichent " rogné " sur l'écran de l'iPhone (largeur 320px).
Comment puis-je les redimensionner automatiquement?
Vous pouvez définir le CSS de vos images pour qu'il prenne automatiquement tout l'espace horizontal disponible à l'écran:
<style>
.ui-grid-b img {
width : 100%;
height : auto;
}
</style>
Cela définira chaque image pour qu'elle remplisse complètement son élément parent (<div class="ui-bar">
) horizontalement tout en conservant ses proportions.
J'ai quelque chose de similaire et j'ai eu le même problème. Je l'ai corrigé en enlevant quelques divs ...
Essaye ça:
<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>
Cela fonctionne dans mon cas (Testé sur iPhone Simulator, Iphone 4, Android Emulator)
Entê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;
}