包含html5自适应图片的词条

html5 怎么让图片自适应

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。

如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度=480,就加载80px宽度的图片，480 宽度 = 768，加载120px的图片， 宽度 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。

这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

相关问答

Q1: html5 怎么让图片自适应?

【效果】图片自动伸缩，不会超过屏幕宽度。

【原理】css控制图片的max-width。

【代码】

要么直接在图片代码里面设置style。

要么给图片统一一个class名。

Q2: 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;

}

Q3: html5手机页面背景图片自适应大小问题

1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。

2、输入width：100％；height：100％；min－width：1000px；这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。

3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

4、输入background－position：center0；使图片的位置，居中，靠左对齐。

Q4: html5 怎么让图片自适应？

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