html - 如何使图像 slider 根据窗口调整大小

Question

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

这是 slider 代码:

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

关于我应该如何修复它以响应屏幕尺寸有什么想法吗？

Answer 1

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

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

因此，无论父级 div 的宽度是多少百分比，图像的宽度始终是该百分比的 100%。

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