jQuery Mobile 中的大图像答案

【问题标题】：Large image in jQuery MobilejQuery Mobile 中的大图像
【发布时间】：2014-05-20 14:12:27
【问题描述】：

我有一张大图片（685 × 900，PNG 格式只有 25kb），我需要在“内容”中显示它，自动调整为屏幕大小，并可以用手指缩放。

现在，用：

<div data-role="content" id="results">
   <img src="img/myimg.png">
</div>

它显示了完整的图像，我什至无法通过它。有办法解决吗？

提前致谢。

【问题讨论】：

【解决方案1】：

如果我理解了您的问题，您需要将此图像作为背景并使用属性background-size: 100%

【讨论】：

不。它不是背景图片。只是和我想展示的图像，并希望提供缩放它的可能性。我已将“宽度”属性写入 100%，现在它会自动调整到屏幕（我仍然无法缩放它）。问题是，如果我用笔记本电脑输入，它也会占用 100% 的屏幕，而不仅仅是 685x900。
你试过换行吗？ <div style="max-width: 685px;"><img src="youImage685x900.png" style="position: relative; width: 100%;" /></div>

【解决方案2】：

有两种可能的解决方案。

在 css 样式中使用 img { max-width: 100%;}。这将强制图像根据容器的大小调整大小。但这里的一个问题是移动设备。他们仍然下载大图，尽管他们看到它调整了大小。这通常是移动设备速度方面的问题。另外，请看视频http://www.youtube.com/watch?v=DvIOex3BhD8
使用插件：http://www.concrete5.org/marketplace/addons/picturefill-image/ 借助它，您可以使不同的图像以不同的分辨率显示（适用于平板电脑、手机屏幕），因此您不必只处理自动调整大小的图片。

仅当您拥有响应式网站时才需要这两种解决方案。

图像占据了它们被赋予的空间。如果他们的容器占用它，它们将占用整个屏幕宽度。如果他们的容器只跨越半个屏幕，他们将占据半个屏幕。

【讨论】：