圖片如何自適應

『壹』 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;
}