如何使滑塊圖像完全響應？

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