jquery做图片轮播时，图片用的1920*628尺寸的，怎么自适应小屏幕电脑

Question

1.目前写的图片轮播是这样的，图片1-5，图片1 display:inline,其余四张display:none
之后图片2：display:inline, 其余四张display:none，隐藏的四张其实就不占位置了，这样图片2就跑到最上面了，并给图片父元素设置了overflow:hidden，
2.现在有个问题：我为了让展板自适应大屏小屏幕，设置的img父元素width:100%,height:100%，图片大小都是1920*628px，这样在小屏幕时会按比例缩放

1和2的效果其实是会冲突的，若是我设置了2中提到的父元素宽高都是100%，那么1中的overflow：hidden就会失效，若是把2中提到的父元素高设为定值，overflow:hidden会有效果，但是不会在小屏幕按比例缩放，so..有解决方案吗？

html:

<section class="banner">
<div class = "wrapper">
    <div id="slider">
        <img id="1" src="images/banner/1.jpg" />
        <img id="2" src="images/banner1.jpg" /> 
        <img id="3" src="images/banner/3.jpg" />   
    </div>

    <a href="#" class="left" ><i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
    </a>
    <a href="#" class="right" ><i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
    </a>      
</div>
</section> 

css:

/*image slider部分*/
.banner{

width:100%;
z-index: -10;
}

.wrapper{
width: 100%;
height: 100%;
margin: 0 auto;

}
.banner .wrapper #slider{
width: 100%;
height: 100%;
/*height: 628px;*/
overflow: hidden;  
}
.banner .wrapper #slider>img{ 
width: 100%;
height: 100%;   
display: none;

}
.wrapper a{
font-size: 30px;
color:rgb(138,134,133);
/*background-color: rgba(179,179,179,0.5);*/
position: absolute;
bottom:220px;
display: none;
}
.wrapper a:hover{

color: #FE4C6E;
}
.wrapper a.left{
float: left;
position: relative;
left: 40px;
}
.wrapper a.right{
float: right;
position: relative;
right: 40px;

}

图片轮播函数：

$(document).ready(function(){
$(".banner").hover(function(){
    // alert();
    $(".banner a").css({"display":"block"});
},function(){
    $(".banner a").css({"display":"none"});
})
})

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
$('#slider>img#1').fadeIn(100);
// $('#slider>img#1').show();
startSlider();
});

function startSlider(){
count = $("#slider>img").length;
// alert(count);
loop = setInterval(function(){

    if(sliderNext > count){
        sliderNext = 1;
        sliderInt = 1;
    }
    $("#slider>img").fadeOut(100);
    $("#slider>img#"+sliderNext).fadeIn(100);

    sliderInt= sliderNext;
    sliderNext = sliderNext+1;

},5000);
}

function prev(){
newSlider = sliderInt -1;
showSlider(newSlider);

}
function next(){
newSlider = sliderInt + 1;
showSlider(newSlider);
}

function stoploop(){
window.clearInterval(loop);
}

function showSlider(id){

stoploop();

if(id>count){
    id = 1;
}else if(id<1){
    id = count;
}

$("#slider>img").fadeOut(100);
$("#slider>img#"+id).fadeIn(100);

sliderInt = id;
sliderNext = id+1;
startSlider();

}
$("#slider>img").hover(
function(){
   stoploop();
},
function(){
   startSlider();
}
)

Answer 1

给父元素设置一个高度，不然图片height:100%不起作用