2016-03-02 102 views
0

我的網站滑塊圖像出現問題。我將我的滑蓋和滑塊內框寬度設置爲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>

+1

簡單只是通過'media-query'根據屏幕分辨率控制或更好地使用css bootstrap框架。 –

+0

我也使用媒體查詢,但仍然沒有迴應! – UrWill

+0

也許嘗試使用'100vw'而不是'100%'https://developer.mozilla.org/en-US/docs/Web/CSS/length – Pit

回答

0

你的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;裁剪圖像,否則圖像可能會有所不同的高度。在這種情況下,您可能要考慮使用divbackground-images

+0

也許它可以幫助知道我真的在做什麼:我用來使MenuCool自由滑塊響應,演示編號8之一:[鏈接](http://www.menucool.com/javascript-image-slider) – UrWill

+0

正如我所說的問題是圖像,我無法設置他們的寬度和高度響應。可能是因爲sliderInner類,類從圖像中獲取高度和寬度。 – UrWill

+0

您將一個像素寬度設置爲您的滑塊內部類。當然它不會有反應。如果您給出該百分比,那麼它將隨其容器大小一起移動。如果你將'width:1280px'改爲'width:100%',然後在'#slider,#slider div.sliderInner'上添加'max-width:1280px',它應該做你想做的。 – ntgCleaner