Question

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

我的问题是在浏览器中发生了什么：图片没有调整到浏览器的高度（我希望它没有滚动条），但可以在小提琴中工作。

我如何计算这个循环？

position:relative

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

vertical-align:top;

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

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

感谢您的帮助！

Answer 1

您未在var

之前使用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;
}

Answer 2

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

img
{
    100vh;
}

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

计算水平图库中的图像

2 个答案: