一张图片的不同浏览器窗口高度答案

【问题标题】：Differing browser window height for one image一张图片的不同浏览器窗口高度
【发布时间】：2014-10-25 03:58:11
【问题描述】：

我有一些简单的 JavaScript 可以将页面上所有显示图片的高度设置为浏览器窗口的高度减去一些像素：

$("img").each( function() {
    var window_height = $(window).height();
    console.log(window_height)
    $(this).height(window_height - 100)
});

第一个图像的类总是active，而其余图像的类总是hidden。这些 CSS 规则是为这些类定义的：

.hidden {
  display: none;
}
.active {
  display: block;
}

现在，当我加载包含四个不同尺寸（原始）图像的页面时，第一张图像处于活动状态，它会在控制台日志中输出以下内容：

但是，如果我将第二个图像设置为活动图像，而将第一个图像和所有其他图像隐藏起来，它会为所有四个图像输出相同的高度。

为什么按特定顺序，第一张图片的大小会不同，而其余图片的大小会相同？我一直在摸索这个问题，但无法弄清楚。

编辑：

HTML：

<img src="./IMG_20141011_132657.jpg" class="active" />
<img src="./IMG_20141011_093916.jpg" class="hidden" />
<img src="./IMG_20141011_094009.jpg" class="hidden" />
<img src="./IMG_20141011_100850.jpg" class="hidden" />

【问题讨论】：

在和标签中写 style="height:100%" 输出是否相同
我试图重现您的问题，但在这个小提琴中似乎一切正常jsfiddle.net/k15rLmu3
请同时添加您的html
您需要提供更多信息。请向我们提供您使用的 HTML 和图像，以便我们给您准确的回复。谢谢
添加了 HTML，尽管它在第二段中有所描述。

标签： javascript jquery html css height

【解决方案1】：

问题是第一张图片比正文宽度宽，因此创建了一个水平滚动条，使窗口高度更小。调整第一张图像的大小后，图像不再比主体宽度宽，水平滚动条也不再存在。

JavaScript window.innerHeight 不会考虑滚动条，试试这个：

$("img").each( function() {
    var window_height = window.innerHeight;
    console.log(window_height)
    $(this).height(window_height - 100)
});

【讨论】：