Question

计算水平图库中的图像数量

2015-08-05

81

javascript html css image

我有这个脚本： 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!');
}

如果我使用以下内容，则只有第一幅图像会调整为视口的高度（并且仍然没有水平滚动条的高度）。将使用此方法选择第一幅图像。我不是一名 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

使用以下代码


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

  之前未使用
  var

Answer 2

只需让所有图像都有 100vh。

img
{
    100vh;
}

http://jsfiddle.net/51tqf1v9/14/

user2072826

2015-08-05