Question

我正在使用HTML5，CSS3，Javascript和Jquery-mobile在PhoneGap中构建移动应用程序。

我有一个带有img元素的html页面来显示图像。我面临的问题是，由于屏幕尺寸不同，它不会根据屏幕显示，而是显示图像的实际尺寸，导致图像显示一半。有没有办法可以自动化这个过程，以便它根据设备的屏幕尺寸显示？

<img src="img\following_followers.png" alt="" >

Answer 1

您必须使用CSS3 @media属性。这是我们所谓的“响应式”设计的一部分。

互联网上甚至还有现成的主题，只需搜索“响应式模板”。

您还可以查看this link了解详情。

Answer 2

This SO question可能会有所帮助。

从技术上讲，您无法直接从CSS访问屏幕的尺寸，也无法在没有JavaScript帮助的情况下了解其父级的绝对尺寸。相反，您通常表示元素相对于其父元素的维度，例如

#logo {
    width: 500px;
}

#logo img {
    width: 33%;
}

如果没有显式设置或继承图像的CSS高度，它将按宽度缩放;反过来也是如此。

您可以使用width: 100%或height: 100%设置图像以填充其父容器，但这可能会导致图像溢出容器。属性max-width和max-height可以解释这一点。尝试：

img {
    max-height: 100%;
    width: 100%;
}

但请注意，默认情况下，大多数浏览器都允许文档在必要时增加高度，因此如果max-height: 100%属性的父容器对其自身的高度没有某种限制，那么window.innerWidth属性将会很少。

也就是说，Javascript可以直接使用window.innerHeight和document.documentElement.clientWidth访问浏览器的维度。 但是，这些属性仅在页面最初加载时设置，如果调整浏览器窗口大小，它们将不会更改。 document.documentElement.clientHeight和{{1}}更可靠。

与往常一样，像jQuery和Bootstrap.js这样的UX库使这种任务变得更加容易。

Answer 3

确保您拥有正确的元标记。如果没有，那么添加此

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

然后在css

<img src="img\following_followers.png" alt="" style="width:100%;height:100%;" >

Answer 4

在你的风格中使用它

 img {
height: 100%;
width: 100%;
 }

如何根据设备的屏幕尺寸显示图像？

4 个答案: