关于html5自适应图片的信息

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;

}

相关问答

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

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

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

【代码】

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

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

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

首先需要div布局，HTML布局：

!DOCTYPE html

html lang="en"headmeta charset="UTF-8"meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"title背景图片自适应/titlestyle type="text/css"html,body {padding: 0;margin: 0;}div {width: 100%;height: 300px;background: url('images/slide_01_640x340.jpg') no-repeat;background-size: 100% 100%;}/style/headbodydiv/div/body/html

2.HTML代码的截图效果：

3.自适应最重要的样式如下：

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"

width: 100%;

background-size: 100% 100%;

4.最终的效果是这样：

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

Q4: html5 怎么让图片自适应

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

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

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

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

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

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。自适应屏幕的宽度，利用css中background属性可以实现

工具/材料

浏览器，文本编辑器

新建一个HTML文件，代码如下图

打开HTML文件所在的文件夹，双击文件，跳转到浏览器

改变浏览器大小，发现图片没有变化，显示不全

在所在文件夹下，新建一个样式文件，命名为 auto.css，代码如下

在HTML文件中加上对样式文件的引用，返回文件夹，双击HTML文件，发现浏览器的变化会引着图片一起变化，自适应屏幕的大小