大banner图居中显示的问题

当我们页面的banner图十分的宽，而我们想要让图居中显示，并且超出浏览器的部分不会产生左右的滚动条，缩小页面的时候还能看见超出浏览器的部分的内容，直到显示完全。

要想达到这种效果我们可以通过几段简单的css代码就能完成：

img{
    margin:0 calc(50% - 图片宽度一半);
    /*这里的calc()可能有兼容问题，可以加上webkit等前缀解决兼容问题；*/
}

还有就是我们通过position的写法来固定图片

img{
    position:absolute;
    left:50%;
    margin-left:-图片宽度的一半px;
}

父元素的设置

.banner{
    position:relative;
    overflow:hidden;
    width:100%;
}