Javascript 为什么图像不能以100%的宽度/高度填充幻灯片容器

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

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

为解决下列问题而采取的步骤： 我已经玩过CSS，并且在相对和绝对之间改变了位置样式。我添加了

宽度：100%到div。我为图片添加了一个额外的样式-
#slide li img{宽度：100%；高度：100%}但似乎什么都不起作用。如果
#slide li img
和
#slide li
和
#slide
都具有100%的宽度/高度，那么第一个图像将缩放到Javascript中设置的组合图像宽度和高度的100%，这将使其失去比例，并且只会滑动该一个图像

我曾尝试在javascript中使用document.getElementsByCassName分别设置宽度/高度，但它仍然无法填充contaning div

代码如下：


函数幻灯片（）{
ul=document.getElementById（“幻灯片”）；
liItems=ul.儿童；
liNumber=liItems.length；
imageNumber=0；
滑块宽度=0；
电流=0；
//左+右箭头
leftArrow=document.getElementById（“左”）；
rightArrow=document.getElementById（“右”）；
对于（i=0；i=0）{
ul.style.left='-'+parseInt（leftPosition）+“px”；
leftPosition-=图像宽度；
}
}, 1000 / 60);
}
函数动画（opts）{
开始=新日期；
id=setInterval（函数（）{
时间通过=新日期-开始；
进度=通过的时间/选择的持续时间
如果（进度>1）{
进展=1；
}
增量=选择增量（进度）；
选择步骤（增量）；
如果（进度==1）{
清除间隔（id）；
opts.callback（）；
}
}，选择延迟| | 1000/60）；
}
}
}
window.onload=滑动
#slidecontainer{
身高：100%；
宽度：100%；
溢出：隐藏；
}
#滑梯{
位置：相对位置；
z指数：0；
列表样式类型：无；
填充：0；
}
#幻灯片李{
位置：相对位置；
左：0；
最高：4%；
保证金：0；
填充：0；
浮动：左；
宽度：25%；
/*在图像范围内调整此值，即4个图像=25%，5个图像=20%*/
}
斯莱德姆先生{
宽度：100%；
身高：100%；
}











1。100%高度
如果要将对象缩放到窗口高度的100%，则需要确保（使用
位置：静态时）或所有（使用
位置：相对时）父元素也使用100%的高度

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

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

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

下面是一个全屏幻灯片的示例。注:


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


html，
身体，
#slidecontainer，
#幻灯片，
锂，
img{
宽度：100%；
身高：100%；
}
* {
保证金：0；
填充：0；
位置：相对位置；
}
/*打开此规则并通过js滚动至幻灯片*/
#滑动容器{
/*溢出-x:隐藏；*/
} 
#滑梯{
宽度：400%；/*（100*滑动计数）*/
}
李{
浮动：左；
宽度：25%；/*（100/滑块计数）*/
列表样式：无；
}
img{
显示：块；
背景：#efef；
}











您可以尝试100%css幻灯片。请看这篇文章：耶，我以前做过一些CSS幻灯片，问题是我在过去两年里一直在避免使用Javascript，尽我所能使用CSS，但现在我需要了解Javascript了。。。