Bild reagiert nicht von der Schieberegler-Galerie

Question

Ich habe ein Problem mit den Fotos der Bildergalerie, die zeigt nicht reagieren (siehe nur den linken Teil des Fotos ...). Ich machte den Schieber Bild mit dem Text und dem div Größe ansprechbar zu sein, aber das Foto hat immer noch die einige Größe (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 (reaktions 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} 
} 

Answer 1

können Sie vw Gerät verwenden https://developer.mozilla.org/en/docs/Web/CSS/length

Demo (1/100stel der Breite des Ansichtsfenster.):

http://jsbin.com/rezimah/9/edit?css,output

max-width: 95vw; 
max-height: 57.7vw