图片如何自适应

‘壹’ html5 怎么让图片自适应

图片分为背景图片和通过img标签引入的图片，前者可以通过media query自动的切换不同分辨率的版本，但是在不支持background image size的浏览器中背景图片无法无级的调整大小（也就是在media query切换css的点上可以换一张不同分辨率的图，但是没法儿获得两张分辨率中间大小的版本），而且在很多情况下（比如cms中）并不适合用背景图片。
如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 < 宽度 <= 768，加载120px的图片， 宽度> 768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

‘贰’ 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;
}

‘叁’ 怎样让图片自适应窗口大小

如果网页使用DIV
+
CSS做布局的话,
在必要地方建议使用
绝对定位
,不要使用浮动
如果使用浮动的话,那就做个自适应宽度的DIV........

‘肆’ 怎样用css控制图片自适应大小

1、首先用dw编辑器建立了一个静态页面

‘伍’ css背景图片自适应，怎么调

用background-size属性，你想给他多大的百分比都可以，不设置表示默认图片大小，设置100%表示全屏显示图片，按比例缩小或者放大。

这样就可以实现背景图片自适应父容器大小而自动变化，达到填充效果。 但是，图片会被拉伸填充，这并不是我们想要的效果，那么我们可以不设置100%参数，而是使用cover参数。

设置cover参数以后，背景图会按比例缩放填充满整个背景。如果使用IE浏览器你会发现，上面的background-size:100% 100%;并没有起到作用，图片原本是怎样就怎样显示，比较大就只能显示一部分。

所以这时需要使用IE特有的滤镜 AlphaImageLoader 兼容性在IE5.5+以上版本的浏览器上都可以完美运行。

1、enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true|false_ true: 默认值。滤镜激活。

2、false: 滤镜被禁止。

3、sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

4、crop: 剪切图片以适应对象尺寸。

5、image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

6、scale: 缩放图片以适应对象的尺寸边界。

7、src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性:

1、Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性。

2、sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性。

3、src: 可读写。字符串(String)。参阅 src 属性。

说明:

在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。

PNG格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG格式的图片完全透明区域后面的内容。这样我们就可以完美兼容绝大多数的浏览器，实现用CSS让背景图片100%填充了。

‘陆’ img标签内的图片怎么自适应img标签的大小呢

CSS2不能自适应。
html中img图像元素的大小默认是图片的实际大小，当更改其中一个值时，图片按比例缩放。只能在外层元素中使img元素自适应大小。
小程序中可以使用mode属性设置显示模式。
CSS3中可以使用object-fit和object-position进行自适应设置。

‘柒’ css怎么让图片自适应

看什么情况了
一是通过将该图片设置为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。
二是将图片设置display：block，设置图片的长宽为rem或者em。
还是要看是什么情况下来去自适应图片的，

‘捌’ DIV+CSS，如何让图片自适应大小

这个才是你真正需要的答案。

<script>
var MaxHeight=100; //图片最大高度
var MaxWidth=100; //图片最大宽度
</script>

<img border="0" src="图片地址" onload="javascript:if(this.height>MaxHeight)this.height=MaxHeight;if(this.width>MaxWidth)this.width=MaxWidth;">

‘玖’ 怎么让图片在手机端自适应大小

首先看一下图片自适应的网页。（本图中的图片大小刚好占满浏览器）

首先，我们在body中增加canvas标签：
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<div> 本养老院占地面积是14000平方米，建筑面积5000平方米。园林面积为7000平方米。</div>
注：这里极力推荐使用html5的canvas标签，使用传统的img标签经试验有一系列问题，小编暂时没找到可自适应的简便方法。

此时刷新页面查看效果，发现注释已经显示出来，且页面上面的花瓣canvas已经预留出空间，如图：

为canvas标签增加自定义背景：
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
background-size: 100%;
}
注：url中是图片的路径，大家需自行修改。

这时候查看页面效果，发现图片已经展示，但是未占满整个浏览器。

使用css定义body、canvas标签样式：
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myCanvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: block;
}

这时候刷新页面，发现图片已经自适应了。目的达成。

‘拾’ html5 怎么让图片自适应

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;
}