;
;
;
在练习仅用html+css布局时,裁剪下的图片像素太高,css设置了width:100% auto;
background: url("images/header.gif") no-repeat;浏览器显示的结果如图。
问:请问各位前辈怎样才能设置图片的大小适应屏幕呢,除了css3的background-size:100%.
试一下这个
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#bg_img{
width: 100%;
height: 100%;
position: fixed;
}
</style>
<body>
<img src="1.jpg" id="bg_img"/>
</body>
用jquery控制图片大小
虽然很low ,但是能实现效果
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bg_img").css({
"height":window.innerHeight+"px",
"width":window.innerWidth+"px"
})
$(window).resize(function(){
$("#bg_img").css({
"height":window.innerHeight+"px",
"width":window.innerWidth+"px"
})
})
})
</script>
</head>
<style type="text/css">
#bg_img{
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<img src="1.jpg" id="bg_img"/>
</body>
你只考虑用div 不考虑用img吗
可以在IMG里调整图片大小