如何使滑块图像完全响应？

Question

我的网站滑块图像出现问题。我将我的滑盖和滑块内框宽度设置为100％但是当我更改屏幕大小时，图像大小不会改变。另外，我将图像宽度设置为max-width:100%，并将它们的高度设置为auto。

#sliderFrame { 
 
    position:relative; 
 
    width:100%; 
 
    margin: 0 auto; /*center-aligned*/ 
 
} 
 

 
#slider, #slider div.sliderInner { 
 
    width:1280px;height:auto;/* Must be the same size as the slider images */ 
 
    border-radius: 6px; 
 
} 
 

 
#slider { 
 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
 
    position:relative; 
 
    transform: translate3d(0,0,0); 
 
    box-shadow: 0px 1px 5px #999999; 
 
} 
 

 
#slider a.imgLink, #slider .video { 
 
    z-index:2; 
 
    cursor:pointer; 
 
    position:absolute; 
 
    top:0px;left:0px;border:0;padding:0;margin:0; 
 
    width:100%;height:100%; 
 
} 
 

 
#slider div.loading { 
 
    max-width:100%; height:auto; 
 
    background:transparent url(loading.gif) no-repeat 50% 50%; 
 
    filter: alpha(opacity=60); 
 
    opacity:0.6; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:9; 
 
} 
 

 
#slider img, #slider>b, #slider a>b { 
 
    position:absolute; 
 
    border:none; 
 
    display:none; 
 
    max-width:100%; 
 
    height:auto; 
 
} 
 

 
#slider div.sliderInner { 
 
    overflow:hidden; 
 
    -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    max-width:100%; 
 
    height:auto; 
 
}

<div id="sliderFrame"> 
 
    <div id="slider"> 
 
    <img src="image/Index_1600x500.jpg" alt="#cap1"/> 
 
    <img src="image/Index_TrackerPnale_1600x500.jpg"/> 
 
    <img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/> 
 
    <img src="image/Index_Support.jpg" title="Support Team"/> 
 
    <img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/> 
 
    </div> 
 
</div>

Answer 1

你的CSS并没有真正说太多关于你的HTML - 同时，我们有什么，你真的滑块意味着没有头绪 - 但是按照此琴：https://jsfiddle.net/p3r1x5sj/，看到很小的您正在寻找的CSS。

#sliderFrame { 
    width:100%; 
    height:100px; 
    position:relative; 
} 
#sliderFrame #slider { 
    width:100%; 
    height:100%; 
    position:relative; 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    box-shadow: 0px 1px 5px #999999; 
} 
#sliderFrame #slider img { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 

img标签是你必须控制的。此外，除非您在最外面的容器上使用overflow:hidden;裁剪图像，否则图像可能会有所不同的高度。在这种情况下，您可能要考虑使用div与background-images