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;
}

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

但是，如果我将第二张图像设为活动状态，并隐藏第一张图像和所有其他图像，则会为所有四张图像输出相同的高度。

为什么第一张图片的尺寸会有所不同，而特定订单的尺寸则相同？我一直在摸不着这个，但无法弄清楚。

编辑：

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)
});

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

1 个答案: