html屏幕变窄之后banner图不居中,banner图宽高固定，宽度远大于屏幕宽度时居中的办法...

假设当前页面有一个banner，图片宽度有1920px，页面内容宽度1200px，需要banner图占满屏幕的左边和右边。但是用户的屏幕并不固定，有1200的也有1920甚至2000+分辨率的。

})%~56({TO4}@LAWJAK1328.png

//图片宽度1920px，高度350px，

.banner{

height: 350px;

width: 100%;

}

.banner>img{

height: 100%;

width: 100%;

}

如上写法，img的100%必定会导致像第一张图的变形，因为用户的屏幕宽度并不同。

此时想要将banner图居中且图片不变形的话，需要如下写法

.banner {

width: 100%;

height: 350px;

background-color: #101010;

overflow: hidden;

}

.banner > img {

overflow: hidden;

width: 1920px;

height: 350px;

position: relative;

left: 50%;

margin-left: -960px;

}

当屏幕宽度小的时候，图片居中显示，边缘被隐藏：

888552.png

当屏幕宽度大的时候，边缘会显示banner的背景色，可以把背景色改成与图片背景相似的颜色，减少不协调感：

995552.png

完毕。