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的网格，自动调整图像大小

回答

相关问题