[CSS] img{width:100%}文档宽度不定

场景：Chrome浏览器
（1）html

（2）CSS

（3）JS

注：
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，所以这种方法需要显式指明高度。