jQuery komórkowy Siatka z auto-zmiana rozmiaru obrazów

Question

mam tej siatki:

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

Ale moje zdjęcia (180X80px) ekran "przycięte" na ekranie iPhone (320px szerokości).

Jak mogę je automatycznie zmienić?

Answer 1

Można ustawić CSS swoich obrazów automatycznie objęcie całą przestrzeń poziomą dostępne na ekranie:

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

Spowoduje to ustawienie każdy obraz, aby całkowicie wypełnić jego elementu nadrzędnego (<div class="ui-bar">) poziomo podczas zachowując proporcje.

Answer 2

Mam coś podobnego i miałem ten sam problem. Naprawiłem go przez usunięcie niektórych div ...

Spróbuj tego:

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

Działa im moją sprawę (testowane na 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; 
    }