网站Bannr适应大小屏幕，图片始终居中不被压缩

网站banner一般都是2000px以上的宽度，为了让在小的屏幕上图片不被压缩并且是居中表现：

　　方法是让包裹图片全部的那个大容器始终正居中

<!-- banner -->

<div id="sy_top">

　　<div class="sy_bigbox">

　　　　<div id="sy_picbox" class="sy_picbox">

<a href="#" target="_blank">

　　　　　　　　 <img src="${ctx }/static/img/banner_1209a.jpg"/>

　　　　　　　</a>

　　　　　　　<a href="#" target="_blank">

　　　　　　　　　　<img src="${ctx }/static/img/banner_1209b.jpg"/>

　　　　　　　　</a>

　　　　　　　　<a href="#" target="_blank">

　　　　　　　　　　<img src="${ctx }/static/img/banner_1209c.jpg"/>

　　　　　　　　</a>

　　　　　　</div>

　　</div>

　　<!-- 都点  -->

　　<div id="sy_bigpicbtn" class="sy_bigpicbtn"></div>

</div>

css写法

/*------------------------ banner ------------------------*/

.sy_bigbox {

position: relative;

width: 100%;

height: 600px;

background-color: #f1f1f1;

overflow: hidden;

}

.sy_picbox {

position: absolute;

white-space: nowrap;

font-size: 0;

width: 100%;

left: 50%;

margin-left: -1000px;

top: 0px;

}

.sy_bigpicbtn {

position: absolute;

width: 100px;

height: 25px;

top: 690px;

left: 0px;

width: 100%;

text-align: center;

}

.sy_bigpicbtn a {

display: inline-block;

width: 50px;

height: 2px;

background-color: #b2c7cd;

margin-right: 10px;

}

.sy_bigpicbtn a.active {

background-color: #687477;

-webkit-animation: dh2 0.7s linear infinite;

}

js 实现轮播动画

var sindex = 0;

var prewindex = 0;

var timeindex = setInterval(doscroll, 3000);

var num = $(".sy_picbox a").length;

var html = "";

for(var i = 0;i<num;i++){

html+= '<a id="a'+i+'" href="#" class=""></a>';

}

$('.sy_bigpicbtn').append(html);

function doscroll() {

prewindex = sindex;

if (sindex != $(".sy_picbox a").length - 1)

sindex++

else

sindex = 0;

$(".sy_bigpicbtn a").removeClass("active")

$(".sy_bigpicbtn a").eq(sindex).addClass("active");

$(".sy_picbox a").hide();

$(".sy_picbox a").eq(sindex).fadeIn(500);

}