场景：Chrome浏览器
（1）html
<body>
<img src="1.png" alt="">
</body>
（2）CSS
<style>
body{
margin:0;
padding:0;
}
img{
width:100%;
}
</style>
（3）JS
<script>
console.log(document.body.clientWidth);
</script>
注：
<u></u>document.body.clientWidth用来获得浏览器窗口，显示区域的宽度。
问题：
缩小浏览器高度，让垂直滚动条出现，
多次刷新浏览器，
显示区域宽度变化的，大小相差17px。
原因：
17px是垂直滚动条的宽度。
如果在图片载入完之前获取显示宽度，文档是没有滚动条的。
在图片载入完之后获取显示宽度，文档是有滚动条的。
垂直滚动条，影响了显示宽度。
解决办法：
使用div的background-image加载图片。
.hacker{
background-image:url('1.png');
background-size: cover;
width:100%;
height:800px;
}
注：
（1）background-size:cover;表示放大背景图像（不能缩小），
以使背景图像完全覆盖背景区域。
（2）因为div默认高度是0，所以这种方法需要显式指明高度。
网友评论