html5设置图片自适应屏幕宽度

html-css011

html5设置图片自适应屏幕宽度,第1张

使用百分比,比如

<

img

src='../a.ipg'

style='width:50%'

/>

这样就会保持屏幕的50%的宽度。

如果有上级标签,比如:

<div>

<

img

src='../a.ipg'

style='width:50%'

/>

</div>

那图片大小就是div宽度的50%,div没有设置宽度就会默认是屏幕宽度,如果设置了宽度,就要注意

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年的艰苦努力,该标准规范终于制定完成。

首先你要在html页面头部加上下面的代码,其次你要把页面中的宽度修改为百分比,不能不用固定尺寸,一些小的模块可以用固定尺寸。再就是css中要应用到媒体查询,也就是@media,不懂可以百度。

<meta name="viewport" content="width=device-width, initial-scale=1"/>