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

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

最后编辑于：2017.12.03 02:46:35

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。