2

我正在使用 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());                      
});
4

3 回答 3

0

好吧，我现在觉得很傻。我从来自 Wordpress 网站的 JSON 响应中获取该图像。当我解析 JSON 以获取图像时，我使用的是图像的缩略图版本（令我惊讶的是，它并不是真正的缩放缩略图，它只是主图像的 150x150 正方形裁剪）。

所以我改变了我的参考：

json.page.thumbnail

至

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

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

感谢大家的帮助

于 2012-12-11T20:26:34.007 回答
0

我假设您的图像实际上嵌套在带有 a 的 div 中，data-role="content"而您的问题是该类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以补偿填充，但是您需要计算宽度以使其填充到右侧。

于 2012-12-11T20:13:23.293 回答
0

以前我也遇到过同样的问题。我试过最小高度。为什么两者都有 maximum-scale=1，minimum-scale=1？试试minimum-scale=1。试一试

于 2012-11-30T10:12:59.597 回答