javascript - slider 库中的图像没有响应

Question

我对图片库的照片有疑问，这些照片没有响应(只看到照片的左侧部分...)。我使 slider 图像响应文本和 div 大小，但照片仍然有一定大小 (600x360)

示例.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>

样式.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 单位(视口(viewport)宽度的 1/100。)https://developer.mozilla.org/en/docs/Web/CSS/length

演示:

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

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