javascript - 计算水平图像库中的图像

Question

我有这个脚本:http://jsfiddle.net/Lanti/51tqf1v9/16/

我的问题是浏览器中发生了什么: 图像未调整为浏览器的高度(我希望它没有滚动条)，但在 fiddle 中工作。

我如何计算这个循环？

window.onload = resize;
window.onresize = resize;
function resize() {
  var windowHeight = window.document.documentElement.clientHeight - 17 + 'px';
  var imgList = document.getElementsByClassName('resize');

  for (i = 0; i < imgList.length; i++) {
    imgList[i].style.height = windowHeight;
  }

  alert('resize event detected!');
}

如果我使用以下内容，则只有第一张图像的大小调整为视口(viewport)的高度(并且仍然没有水平滚动条的高度)。第一个图像将被选中。我不是 javascript 程序员，我不知道如何为所有选定的 img 元素创建一个工作循环:

window.onload = resize;
window.onresize = resize;
function resize() {
  var windowHeight = window.document.documentElement.clientHeight - 17 + 'px';
  var imgList = document.getElementsByClassName('resize');

  imgList[0].style.height = windowHeight;

  alert('resize event detected!');
}

我在浏览器控制台中收到以下错误:

Uncaught ReferenceError: i is not defined

感谢您的帮助!

Answer 1

你没有在 i 之前使用 var

使用下面的代码

    window.onload = resize;
window.onresize = resize;
function resize() {
  var windowHeight = window.document.documentElement.clientHeight + 'px';
  var imgList = document.getElementsByClassName('resize');

  for (var i = 0; i < imgList.length; i++) {
    imgList[i].style.height = windowHeight;
  }

  alert('resize event detected!');
}

使用 CSS

img.resize
{
    height:97vh;
}