画像はスライダーギャラリーから反応しません

Question

画像ギャラリーの写真に問題がありますが、が反応しません（画像の左側のみ参照）。私は、テキストとdivのサイズで応答するようにスライダー画像を作ったが、写真はまだいくつかのサイズ（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} 
} 

Answer 1

あなたはVWユニットを使用することができますhttps://developer.mozilla.org/en/docs/Web/CSS/length

デモ（ビューポートの幅の1 /第百を。）：

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

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