html怎样设置图片自动适应

html5中是通过css3的background-size来控制自适应的。
background-size神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化，当有resize事件发生时，页面会出现不可预测的变化。但background-size却能根据客户端浏览器的大小自我的调整适应。background-size在火狐浏览器, Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。
例子：
/ base header classes /
#header {
/ header dimension! /
height: 350px;
/ additional background properties /
background-repeat: no-repeat;
background-position: center center;
/ some box shadow for good fun /
-webkit-box-shadow: rgba(0,0,0,020) 0 10px 10px;
-moz-box-shadow: rgba(0,0,0,020) 0 10px 10px;
box-shadow: rgba(0,0,0,020) 0 10px 10px;
}
/ 覆盖 cover /
#headerflex {
/ size matters /
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/ 包含 contain /
#headerflex {
/ size matters /
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
/ flex, fun /
#headerflex {
/ size matters /
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
}

---