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;使图片的位置,居中,靠左对齐。
首先需要div布局,HTML布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="漏蚂width=device-width, initial-scale=1, 敬搜中user-scalable=no">
<title>背景图片自适应</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
div {
width: 100%;
height: 300px;
background: url('images/slide_01_640x340.jpg') no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.HTML代码的截图效果:
3.自适应最重要的样式如下:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
width: 100%;
background-size: 100% 100%;
4.最终的效果是这亮山样:
这个问题有三种解决方案,都不数高完美
background-size: 100% 100%;, 保证能与手机胡毕亮屏幕一样大,但是会拉伸压缩裤宽图片导致难看死了
background-size: cover; 适用于chrome,在IE上有问题。
用插件,backstretch,大小与手机屏幕一样大,有超出部分就截取掉。
综合来说,第三种最好