Javascript 一个图像的不同浏览器窗口高度

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

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

第一个图像总是有一类

活动的

，而其余的图像有

隐藏的

。这些CSS规则是为这些类定义的：

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

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

552
565
565
565

但是，如果第二个图像处于活动状态，而第一个图像和所有其他图像都处于隐藏状态，则这四个图像的输出高度相同

为什么第一个图像的大小会不同，而其余图像的大小会相同？我一直在为这件事挠头，但想不出来

编辑：

HTML:

---

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

JavaScript

窗口。innerHeight

将不考虑滚动条，请尝试以下操作：

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

---

如果您在中写入style=“height:100%”并且tagI试图重现您的问题，那么输出是否相同？但在中，似乎一切正常。请同时添加您的html。您需要提供更多信息。请向我们提供您正在使用的HTML和图像，以便我们能够给您准确的答复。虽然在第二段中有描述，但还是感谢HTML。

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