jQuery Mobile的網格，自動調整圖像大小

我有這樣的網格：jQuery Mobile的網格，自動調整圖像大小

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

但我的圖片（180X80px）顯示在iPhone屏幕（320像素寬）的「裁剪」。

如何自動調整它們的大小？

來源

2011-11-22 Fabio B.

您可以設置圖片的CSS自動卷取所有可用的水平空間在屏幕上：

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

這將設置每個圖像完全填充它的父元素（<div class="ui-bar">）水平，而保持其縱橫比。

來源

2011-11-22 18:49:34 Jasper

+10

我想指出在使用'width'時，圖像會向上或向下放大以填充容器。如果您要使用'max-width'，小圖片將不會被放大，這對於某些人來說可能是需要的。 – zzz

我設置我的圖像寬度爲100％，並在我的phonegap/jquery移動/ iPhone應用程序的自動高度，但圖像仍然看起來截斷 – farjam

@farjam你使用'視口'元標記？ http://stackoverflow.com/questions/6448465/jquery-mobile-device-scaling/6457261#6457261 – Jasper

我有類似的東西，我有同樣的問題。我固定它通過去除一些div ...

試試這個：

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

它的工作原理IM我的情況下（測試iPhone模擬器，iPhone 4，Android模擬器）

頁眉：

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

來源

2013-03-07 19:15:38 vitaminasweb

jQuery Mobile的網格，自動調整圖像大小

回答

相關問題