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

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

，我应该如何解决它屏幕尺寸回应任何想法？

来源

2015-02-08 AAnqv

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

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

所以，无论div div的宽度是多少，图像的宽度总是100％。

而且我不知道，但我认为你可能必须添加的JS一个额外的行为好，使响应滑块

来源

2015-02-08 07:28:03

我没弄明白，这是可能的JS，在代码在问题中固定宽度是需要的，因为它保存了那个宽度的图像，并且图像宽度不是动态的，如果没有JS，似乎不可能。干杯:) – AAnqv 2015-02-09 03:40:33

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

回答

相关问题