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

Question

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

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

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

Answer 1

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% 属性的作用非常小某种对自高度度的限制。

也就是说，Javascript 可以直接使用 window.innerWidth 和 window.innerHeight 访问浏览器的尺寸。 但是，这些属性仅在页面初始加载时设置，并且不会在浏览器窗口调整大小时发生变化。 document.documentElement.clientWidth 和 document.documentElement.clientHeight 更可靠。

一如既往，jQuery 和 Bootstrap.js 等 UX 库使此类任务变得更加容易。