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

Question

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

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

解决步骤：我已经使用了 CSS，并在相对和绝对之间更改了位置样式。 我添加了width:100%; 到div。 我为图像添加了额外的样式 - #slide li img {width:100%; height:100%}; #slide li img {width:100%; height:100%}; 然而似乎没有任何效果。 如果#slide li img & #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 ie 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% 高度

如果要将事物缩放到窗口高度的 100%，则需要确保（使用position: static ）或所有（使用position: relative ）父元素也使用 100% 的高度。

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

2. 100% 宽度

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

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

这是全屏幻灯片的示例。 笔记：

• 如果我是你，我会将标签和 id 选择器与类选择器交换
• 我会在ul上使用display: flex ，在li上使用flex-grow: 1而不是 float ，但两者都可以。

 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>