为什么图像没有填充幻灯片容器，宽度/高度为100%

如果这是重复的道歉，我找不到答案。我正在制作一个纯Javascript幻灯片，并且几乎已经完成了。然而，我面临着一个似乎无法解决的问题。

我无法获得100%宽度和100%高度填充div的图像。一旦完成，应该分别幻灯片所有的图像，最终完成我的幻灯片。

为解决以下问题而采取的步骤：我玩过CSS，并在相对和绝对之间更改了位置样式。我已将width:100%;添加到div中。我为图像添加了一个额外的样式——#slide li img {width:100%; height:100%};，但似乎什么都不起作用。如果CCD_ 3&#slide li&#slide的宽度/高度都是100%，然后第一个图像缩放到Javascript中设置的组合图像宽度和高度的100%，这会使其不成比例，只会滑动那一个图像。

我曾尝试使用document.getElementsByClassName在javascript中单独设置宽度/高度，但它仍然无法填充包含的div

这是代码：

function Slide() {
  ul = document.getElementById("slide");
  liItems = ul.children;
  liNumber = liItems.length;
  imageNumber = 0;
  sliderWidth = 0;
  currImg = 0;
  // Left + Right Arrows
  leftArrow = document.getElementById("left");
  rightArrow = document.getElementById("right");
  for (i = 0; i < liNumber; i++) {
    imageWidth = liItems[i].children[0].clientWidth;
    sliderWidth += imageWidth;
    imageNumber++;
  }
  // Set UL's Width as total width of all images in slider.
  ul.style.width = parseInt(sliderWidth) + "px";
  slider(ul);
  function slider(ul) {
    animate({
      delay: 1000 / 60,
      duration: 3000,
      delta: function(p) {
        return Math.max(0, -1 + 2 * p)
      },
      step: function(delta) {
        ul.style.left = '-' + parseInt(currImg * imageWidth + delta * imageWidth) + "px";
      },
      callback: function() {
        currImg++;
        //Keep sliding if not last image
        if (currImg < liNumber - 1) {
          slider(ul);
        }
        // Slide back to first image, if last image
        else {
          leftPosition = (liNumber - 1) * imageWidth;
          //after set seconds, call goback for first image
          setTimeout(function() {
            goBack(leftPosition)
          }, 2000);
          setTimeout(function() {
            slider(ul)
          }, 3000);
        }
      }
    });
    function goBack(leftPosition) {
      currImg = 0;
      setInterval(function() {
        if (leftPosition >= 0) {
          ul.style.left = '-' + parseInt(leftPosition) + "px";
          leftPosition -= imageWidth;
        }
      }, 1000 / 60);
    }
    function animate(opts) {
      start = new Date;
      id = setInterval(function() {
        timePassed = new Date - start;
        progress = timePassed / opts.duration
        if (progress > 1) {
          progress = 1;
        }
        delta = opts.delta(progress);
        opts.step(delta);
        if (progress == 1) {
          clearInterval(id);
          opts.callback();
        }
      }, opts.delay || 1000 / 60);
    }
  }
}
window.onload = Slide;

#slidecontainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#slide {
  position: relative;
  z-index: 0;
  list-style-type: none;
  padding: 0;
}
#slide li {
  position: relative;
  left: 0;
  top: 4%;
  margin: 0;
  padding: 0;
  float: left;
  width: 25%;
  /* Adjust this value within the range of images i.e 4 images = 25%, 5 images = 20% */
}
.slideimg {
  width: 100%;
  height: 100%;
}

<div id="slidecontainer">
  <ul id="slide">
    <li>
      <img src="images/style.jpg" alt="1" class="slideimg" />
    </li>
    <li>
      <img src="images/style1.jpg" alt="2" class="slideimg" />
    </li>
    <li>
      <img src="images/style2.jpg" alt="3" class="slideimg" />
    </li>
    <li>
      <img src="images/style3.jpg" alt="4" class="slideimg" />
    </li>
  </ul>
</div>

请不要给出jquery解决方案，它需要是Vanilla。