Html 如何根据窗口调整图像滑块的大小

我有一个使用CSS的动画幻灯片。我不知道如何根据窗口大小调整滑块大小，目前无论浏览器屏幕大小如何，滑块大小都保持不变

以下是滑块代码：

@-webkit-keyframes slider {     
 ...
 div#slidercontainer { 
position: relative;

border-left:150px solid white; 

overflow: hidden; 
background: #000 
}
div#slidercontainer { 
width: 900px;
height: 400px; 
}

div#sider img {  
width: 900px;
height: 400px; 
float: left;
 }

div#css3slider { 
position: absolute; 
width:4500px;  
...}



div#css3slider img { 
float: right; 
 }
<div id=slidercontainer>
 <div id=css3slider style="width:fill,margin-left:200px">
<img src=ban1.jpg alt="Square-tailed kite">
<img src=ban2.jpg alt="White-tailed kite">
<img src=ban3.jpg alt=Hawk title=Hawk>
<img src=ban4.jpg alt=Osprey>
<img src=ban1.jpg alt="Square-tailed kite">
</div>
</div>

---

你知道我应该如何调整它以适应屏幕大小吗？

根据css代码的外观，你已经给了固定的宽度，在响应中，宽度不应该是固定的，但应该以百分比设置，只有这样图像才会根据浏览器窗口调整大小

首先，根据需要设置主容器宽度的百分比，并且还应将图像设置为百分比。图像宽度可以设置为100%，通过将其设置为100%，这意味着它们是父图像宽度的100%

因此，无论父div的宽度是多少（以百分比表示），图像的宽度始终是该值的100%

---

我也不确定，但我认为你可能还需要在js中添加一行，使滑块响应

我确实想出来了，在js中是可能的，在有问题的代码中，需要固定宽度，因为它容纳的图像是该宽度，图像宽度不是动态的。没有js，似乎不可能。干杯：