jQuery Mobile cuadrícula con imágenes auto-cambio de tamaño

Question

que tiene esta red:

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

Pero mis imágenes (180X80px) pantalla " recortada" en la pantalla del iPhone (320 píxeles de ancho).

¿Cómo puedo cambiar el tamaño automáticamente?

Answer 1

Puede configurar el CSS de sus imágenes configurado para recogerlo de forma automática todo el espacio horizontal disponible en la pantalla:

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

Esto fijará cada imagen para llenar completamente su elemento padre (<div class="ui-bar">) horizontalmente mientras manteniendo su relación de aspecto.

Answer 2

Tengo algo similar y tuve el mismo problema. me fijo mediante la eliminación de algunos divs ...

Prueba esto:

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

Funciona im mi caso (Probado en el iPhone Simulator, Iphone 4, Android Emulador)

Cabecera:

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