Question

我有一个使用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>

关于如何修复它以响应屏幕尺寸的任何想法？

Answer 1

你的css代码看起来已经给定了固定的宽度，响应的宽度不应该被修复，但它应该以百分比设置，然后才会根据浏览器窗口调整图像大小。

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

因此，无论父div的宽度是百分比，图像的宽度总是100％。

另外我不确定，但我认为您可能还需要在js中添加额外的一行，使滑块响应

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

1 个答案: