javascript - 一张图片的不同浏览器窗口高度

Question

我有一些简单的 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;
}

现在，当我加载包含四个不同大小的图像(原始图像)并且第一张图像处于事件状态时，它会将以下内容输出到控制台日志:

552
565
565
565

但是，如果我将第二张图片设为事件图片，将第一张图片和所有其他图片隐藏起来，它会为所有四张图片输出相同的高度。

为什么第一张图片的尺寸不同，而其余图片的尺寸相同？我一直在为这个问题绞尽脑汁，但想不通。

编辑:

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

Answer 1

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

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

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