网站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);

}

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

原文：http://www.cnblogs.com/haonanZhang/p/6236196.html