jQuery Mobile Lưới với những hình ảnh tự động thay đổi kích thước

Question

Tôi có lưới này:

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

Nhưng hình ảnh của tôi (180X80px) hiển thị "cắt" trên màn hình iPhone (320px chiều rộng).

Tôi có thể tự động định lại kích thước chúng bằng cách nào?

Answer 1

Bạn có thể đặt CSS hình ảnh của bạn để tự động đưa lên tất cả không gian ngang có sẵn trên màn hình:

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

này sẽ thiết lập mỗi hình ảnh hoàn toàn điền vào yếu tố mẹ của nó (<div class="ui-bar">) theo chiều ngang trong khi duy trì tỷ lệ khung hình của nó.

Answer 2

Tôi có mọi thứ tương tự và tôi gặp vấn đề tương tự. tôi cố định nó bằng cách loại bỏ một số divs ...

Hãy thử điều này:

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

Nó hoạt động im trường hợp của tôi (Tested trên iPhone Simulator, Iphone 4, Android Emulator)

Tiêu đề:

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