html中如何使图片自动适应浏览器

html-css022

html中如何使图片自动适应浏览器,第1张

可以使用html的style标签的width属性实现这种图片自动适应效果。

具体步骤如下:

需要准备的材料分别是:电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件。

2、在html文件中输入以下的html代码。

3、编辑完成以后,在ue编辑器中点击保存,格式选择UTF8无BOM。

4、在浏览器中打开此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,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

}

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