Question

html5 怎么让图片自适应？

Answer 1

html5中是通过css3的background-size来控制自适应的。

• 直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-width:100%;"/>2、要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class

html5

• 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容）

• 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

Answer 2

1、要么直接在图片代码里面设置style，例如<img src="xxx.jpg" style="max-width:100%;"/>2、要么给图片统一一个class名例如response-img，然后在css文件里面设置这个class.

Answer 3

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,0.20) 0 10px 10px;
-moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}

/* 覆盖 cover */
#header.flex {
/* size matters */
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

/* 包含 contain */
#header.flex {
/* size matters */
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}

/* flex, fun */
#header.flex {
/* size matters */
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
}