header标签里加上：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=no"/>
maximum-scale=2表示最大可以让页面放大2倍。
首先看一下图片自适应的网页。（本图中的图片大小刚好占满浏览器）首先，我们在body中增加canvas标签：
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<div> 本养老院占地面积是14000平方米，建筑面积5000平方米。园林面积为7000平方米。</div>
注：这里极力推荐使用html5的canvas标签，使用传统的img标签经试验有一系列问题，小编暂时没找到可自适应的简便方法。
此时刷新页面查看效果，发现注释已经显示出来，且页面上面的花瓣canvas已经预留出空间，如图：
为canvas标签增加自定义背景：
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg)
background-size: 100%
}
注：url中是图片的路径，大家需自行修改。
这时候查看页面效果，发现图片已经展示，但是未占满整个浏览器。
使用css定义body、canvas标签样式：
body {
height: 100%
width: 100%
margin: 0
padding: 0
}
#myCanvas {
height: 100%
width: 100%
margin: 0
padding: 0
display: block
}
这时候刷新页面，发现图片已经自适应了。目的达成。
