为什么图像没有填满幻灯片容器，100% width/Height

Question

如果这是重复的道歉，我找不到答案。我正在制作 Pure Javascript 幻灯片并且几乎完成了。但是我遇到了一个我似乎无法解决的问题。

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

采取的解决步骤：我玩过 CSS，并改变了相对和绝对之间的位置样式。我已将 width:100%; 添加到 div 中。我为图像添加了额外的样式 - #slide li img {width:100%; height:100%}; 但似乎没有任何效果。如果 #slide li img & #slide li & #slide 的 width/height 均为 100%，则第一个图像将缩放到 [=43= 中设置的组合图像宽度和高度的 100% ], 这太不成比例了，只会滑动那一张图片。

我试过用document.getElementsByClassName在javascript中单独设置width/height，但是还是没有填满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。

Answer 1

1。 100% 高度

如果您想将事物缩放到 window 高度的 100%，您需要确保足够（使用 position: static 时）或 all（当使用position: relative时）父元素也使用100%的高度。

在堆栈片段中，这意味着将这些规则添加到 html 和 body，以及您自己的所有元素。

2。 100% 宽度

宽度要简单一些，因为每个 display: block 元素都会自动填满它的父元素。可以肯定的是，您可以向所有前面提到的元素添加一个 width: 100% 规则。

您的 css 遇到的问题是，每个 float 相对于其父项的宽度为 25%，而父项的宽度仅为 100%。将其更改为 400%（幻灯片数量 * 100），固定宽度。

这里是全屏幻灯片的示例。注：

如果我是你，我会用 class 选择器交换标签和 ID 选择器
我会在 ul 上使用 display: flex 并在 li 上使用 flex-grow: 1 而不是浮动，但两者都可以工作。

html,
body,
#slidecontainer,
#slide,
li,
img {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  position: relative; 
}

/* turn this rule on and scroll via js to slide */
#slidecontainer {
  /* overflow-x: hidden; */ 
} 

#slide {
  width: 400%; /* (100 * slideCount) */
}

li {
  float: left;
  width: 25%; /* (100 / slideCount) */
  
  list-style: none;
}

img { 
  display: block;
  background: #efefef; 
}

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

奖金：没有javascript

现在，只是为了好玩，这里有一个没有 javascript 的实现 :) 不过更改幻灯片的数量需要做很多工作，所以我会采用混合方法或使用 css 预处理器生成动画关键帧，如果我是你的话。（仅在 chrome 中测试过）

html, body, #slidecontainer {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
} 

* {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

#slide {
  position: relative;
  width: 400%;
  height: 100%;
  display: flex;
  
  animation-duration: 7s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

#slide > li {
  flex-grow: 1;
  list-style: none;
}

.slideimg {
  width: 100%;
  height: 100%;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0); 
  }
  20% {
    transform: translate3d(0, 0, 0); 
  }
  25% {
    transform: translate3d(-25%, 0, 0); 
  }
  45% {
    transform: translate3d(-25%, 0, 0); 
  }
  50% {
    transform: translate3d(-50%, 0, 0); 
  }
  70% {
    transform: translate3d(-50%, 0, 0); 
  }
  75% {
    transform: translate3d(-75%, 0, 0); 
  }
  95% {
    transform: translate3d(-75%, 0, 0); 
  }
}

<div id="slidecontainer">
  <ul id="slide">
    <li style="background: green;">
      <img src="images/style.jpg" alt="1" class="slideimg" />
    </li>
    <li style="background: blue;">
      <img src="images/style1.jpg" alt="2" class="slideimg" />
    </li>
    <li style="background: yellow;">
      <img src="images/style2.jpg" alt="3" class="slideimg" />
    </li>
    <li style="background: red;">
      <img src="images/style3.jpg" alt="4" class="slideimg" />
    </li>
  </ul>
</div>

为什么图像没有填满幻灯片容器，100% width/Height

Why does image not fill slide container, with 100% width/Height

html

javascript

css

slideshow

1。 100% 高度

2。 100% 宽度

奖金：没有javascript