2-05 3,793 views
简单介绍用一种快捷的方法实现大图居住全屏显示,要使用jquery中的技术
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div{
background: url(bg.jpg) no-repeat;
}
</style>
<script type="text/javascript">
$(function(){
//获取浏览器的分辨率
var clientWidth = $(window).width();
var clientHeight = $(window).height();
//设置div的宽和高,div的背景图就是你的大图
$('#div').css({
width: clientWidth,
height: clientHeight
});
})
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
如果想要图片不缩放,请在css里面设置 background-position:100% 100%;