2016-09-25 50 views
0

我有一個圖片庫的照片的問題,那些不顯示響應(請參閱只有左邊的照片...)。我做了滑塊圖像響應與文本和股利的大小,但照片仍然有一些大小(600x360)圖片沒有響應滑塊庫

exemple.php

<div id="sliderFrame"> 
     <div id="slider"> 
<a href="/test.php"><img src="/images/photo1.jpg" alt="Message to appear on the image slider"></a> 
<a href="/test2.php"><img src="/images/photo2.jpg" alt="Text to appear on the image slider"></a> 
</div> 
</div> 

的style.css

#sliderFrame, #sliderFrame div{box-sizing:content-box;} 
#sliderFrame{position:relative;width:600px;margin:0 auto;} 
#slider, #slider div.sliderInner{width:600px;height:366px;} 
#slider{background-image:(../images/loading.gif) no-repeat 50% 50%;position:relative;margin:0 auto;transform:translate3d(0,0,0);box-shadow:0px 1px 5px #999999;} 
#slider a.imgLink, #slider div.video{z-index:2;position:absolute;top:0px;left:0px;border:0;padding:0;margin:0;width:100%;height:100%;} 
#slider .video{background:transparent url(video.png) no-repeat 50% 50%;} 
#slider div.mc-caption-bg, #slider div.mc-caption-bg2{position:absolute;width:100%;height:auto;padding:20px 0;left:0px;bottom:0px;z-index:3;overflow:hidden;font-size:0;} 
#slider div.mc-caption-bg{background:Black;} 
#slider div.mc-caption-bg2{background:none;} 
#slider div.mc-caption{font:bold 26px/20px Arial;color:#EEE;z-index:4;text-align:center;background:none;} 
#slider div.mc-caption a{color:#FB0;} 
#slider div.mc-caption a:hover{color:#DA0;} 
#slider div.navBulletsWrapper{top:380px;text-align:center;background:none;position:relative;z-index:5;} 
#slider div.navBulletsWrapper div{width:11px;height:11px;font-size:0;color:White;display:inline-block;*display:inline;zoom:1;overflow:hidden;cursor:pointer;margin:0 8px;background-image:url(../images/bullet.png);} 
#slider div.navBulletsWrapper div.active{background-position:0 -11px;} 
#slider div.navBulletsWrapper div:hover{ background-image:url(../images/bullet-hover.png)} 
#slider div.loading{width:100%;height:100%;background:transparent url(../images/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;} 
#slider div.sliderInner{overflow:hidden;-webkit-transform:rotate(0.000001deg);position:absolute;top:0;left:0;} 
#slider>a, #slider video, #slider audio{display:none;} 
#slider div{-webkit-transform:tran 
#slate3d(0,0,0);transform:translate3d(0,0,0);} 

small.css(響應CSS)

@media screen and (max-width: 980px) { 
#sliderFrame { max-width:100%} 
    #slider, #slider div.sliderInner, #slider div.navBulletsWrapper, #slider div.navBulletsWrapper div { max-width:100%;} 
    #slider div.mc-caption { font-size:12px; max-width:100%; } 
    #sliderFrame #slider img{ max-width:100%; height:auto} 
    #slider img{ max-width:100%; height:auto} 
} 
+0

人?知道如何幫助我修復形象以應對?對不起,雙後... –

回答