今天在画一个页面时,图片老是渲染的不对,排查代码看着也没啥问题。原来div容器尺寸比较大,而图片尺寸比较小。我们模拟一下这个现象。
真是图片如下(450px 237px):
设置div容器大小为600px 600px。代码如下:
<html>
<head>
<style type="text/css">
#icon{
width: 600px;
height: 600px;
background-image: url("./icon.png");
//background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="icon">
</div>
<script>
</script>
</body>
</html>
渲染出来的图片如下:
明显不对。把代码中的注释去掉,加上background-size属性就OK了。