Question

我正在使用PhoneGap和jQuery mobile创建一个iPhone应用程序。我正在使用一个简单的图像标签并将宽度设置为100％，将高度设置为自动，但图像不能正确缩放并被切断。我也尝试过使用max-width和相同的结果。知道如何解决这个问题吗？

<div data-role="page">
    <img class="banner" src="..." style="width: 100%; height: auto;">
</div>

我甚至试过这个：

$('img.banner').each(function(){
    $(this).width($(window).width());                      
});

Answer 1

以前我遇到过同样的问题。我尝试过最小高度。为什么maximum-scale=1，minimum-scale=1？试试minimum-scale=1。试试吧

Answer 2

我假设您的图片实际上嵌套在一个带有data-role="content"的div中，而您的问题是默认情况下类ui-content的填充量为15px。

最简单的方法就是简单地覆盖该页面的CSS来摆脱那个填充，如果你需要它用于其他元素，那么只需将它们包装在div中并为这些div添加填充。

例如

CSS

.imgContPage { padding:0px; }

标记

  <div data-role="page">
    <div data-role="content" class="imgContPage">
    <img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
    </div>
</div>

链接到JSBin

或者，您可以在img上设置负边距以补偿填充，但是您需要计算宽度以使其填充到右侧。

Answer 3

好的，我现在感到非常愚蠢。我从一个来自Wordpress网站的JSON响应中获取该图像。当我解析我的JSON以获取图像时，我正在使用图像的缩略图版本（令我惊讶的是，它不是真正的缩放缩略图，它只是主图像的裁剪150x150平方）。

所以我改变了我的参考：

json.page.thumbnail

到

json.page.attachments[0].images.full.url

现在图像缩放得很好（宽度：100％，高度：自动）。

感谢大家的帮助

图像无法在Phonegap，jQuery移动应用程序中正确缩放

3 个答案: