이미지가 슬라이더 갤러리에서 반응하지 않습니다

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)

,288,256,193,114,052,063,210

Answer 1

당신은 폭스 바겐 단위 사용할 수 있습니다 https://developer.mozilla.org/en/docs/Web/CSS/length

데모 (뷰포트의 폭의 1/100입니다.) :

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

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