.bg {
background: url( "http://www.hqyt.net/upload/2016/09/13/147375594449qmms8.jpg" ) center center no-repeat scroll
background-size: cover
min-height: 300px
}
<div class="bg"></div>
效果演示：源代码：.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cellvertical-align:middle/*设置水平居中*/ text-align:center/* 针对IE的Hack */ *display: block*font-size: 175px/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200pxheight:200pxborder: 1px solid #eee} .box img { /*设置图片垂直居中*/ vertical-align:middle/*非IE6下的等比缩放*/ max-height:150pxmax-width:150px/*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/ width:expression(this.width >150 &&this.height <= this.width ?解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
