页面宽度自动变换,背景图片始终居中

最近遇到这个一个问题,客户需要图片一直水平居中并且不变形,我们知道图片设置宽度100%,高度100%之后,会在不同设备下被分辨率强制变形,这样很不美观,因此客户提出来 水平始终居中 的要求,那么能实现吗?

能!禁用css就能实现 水平居中!

html:

<div class="banner">
	<div class="bgimg" style="background-image:url(../img/1.png)"></div>
</div>

css:

.banner{width: 100%;height: 390px;overflow: hidden;position: relative;}
.bgimg{width: 1920px; height: 390px;position: absolute; left: 50%; top: 0%;margin-left: -50%; margin-top: 0px;background-repeat: no-repeat;background-position: center;}	

原理和常用的弹框居中一样,通过定位left:50%,marginleft:-50%或者transform: translateX(-50%);都可以达到水平一直居中的效果!