javascript - 自动调整图像大小以适应浏览器

Question

我有一个网站提供不同尺寸的“随机”图片，如果不是大多数图片，有些图片恰好不适合浏览器，所以我想知道一种无需滚动即可调整其大小以适应浏览器 View 的方法，所以为什么不是 Stack Overflow 的人呢!

显然保持比例，我尝试了 https://github.com/gutierrezalex/photo-resize/但没有按预期工作。
所以这是一个带有一些文本的 html 页面，中间是图像，下面是一些其他文本。
我想要的只是滚动无法使用，因为图像应该缩小到足以做到这一点。

Answer 1

您不需要任何 JavaScript 或 hack 来实现这种图像缩放 - 简单的 CSS 和 HTML 就可以正常工作。 (顺便说一句，也适用于 iPad 和 iPhone。)

您只需将 img 与 CSS 属性 height:100%; 放在一起，它将具有 DOM 树中父节点的高度。确保该节点(通常是 div)将正确定位在浏览器窗口中。

尝试这样的事情:

<div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
  <img src='whatever.png' style="height: 100%" />
</div>

查看此页面作为演示:andrehelbig.fotograf.de .这里的背景图片将始终按比例缩放以填充整个浏览器窗口(不要被 JS 滚动所激怒)。

希望能对您有所帮助。