下面列出三种方法让图片占据整个页面,适应窗口的大小。
方法一:
使用img标签,设置其宽高为100%,并设置定位position为absolute。
<!-- 样式部分 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100%;
position: absolute;
}
</style>
<!-- body部分 -->
<body>
<img src="A.png">
</body>
结果:
分析:设置成绝对定位脱离了文档流,对这个例子来说,就是img的布局不受的限制了,可以说是和平起平坐了,所以此时设置的高度100%就是浏览器的高度。
方法二:
使用img标签,设置其宽高为100%,不设置定位,设置html,body{height:100%;}。
<!-- 样式部分 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
/*不让滚动条出现*/
body{overflow: hidden;}
img{
width: 100%;
height: 100%;
}
</style>
<!-- body部分 -->
<body>
<img src="A.png">
</body>
结果:
方法三:
使用背景图片background-size来设置。
<!-- 样式部分 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
position: absolute;
background-image: url("A.png");
background-size: 100% 100%;
}
</style>
<!-- body部分 -->
<body>
<div></div>
</body>
结果和前面两个一样。