html5手机页面背景图片自适应大小问题

1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。

2、输入width：100％；height：100％；min－width：1000px；这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。

3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

4、输入background－position：center0；使图片的位置，居中，靠左对齐。

1. 首先需要div布局，HTML布局：

   
   

html,body {
padding: 0;
margin: 0;
}
div {
width:  100%;
height: 300px;
background: url('images/slide_01_640x340.jpg') no-repeat;
background-size: 100%  100%;
}

2.HTML代码的截图效果：

3.自适应最重要的样式如下：

width:  100%;

background-size: 100%  100%;

4.最终的效果是这样：

这个问题有三种解决方案，都不完美

1.  background-size: 100% 100%;，  保证能与手机屏幕一样大，但是会拉伸压缩图片导致难看死了
   

2. background-size: cover;  适用于chrome,在IE上有问题。

3. 用插件，backstretch，大小与手机屏幕一样大，有超出部分就截取掉。

综合来说，第三种最好