如何使圖片自適應

Ⅰ 這段代碼怎麼才能讓圖片自適應

圖片尺寸過大將會影響頁面布局。最理想的解決方案自然是自動生成縮略圖，涉及的後台工作較為復雜，用CSS進行控制是一個可以接受的捷徑。 如果用width 屬性強行設定顯示尺寸似乎太不智能。幸好 Firefox/Opera/IE 7 都提供了 max-width 屬性支持。假定希望圖片顯示寬度不超過500像素，CSS可能如下： 以下是引用片段：以下是引用片段： fit-image { border : 0; max-width : 500px; } IE6 不支持 max-width 屬性，但是利用 IE 獨有的 expression 屬性可以迂迴的解決這個問題。 以下是引用片段：以下是引用片段： fit-image { border : 0; max-width : 500px; width: expression ( function(img){ img.onload=function(){ this.style.width = (this.width > 500)?"500px":this.width+"px"};return 』120px』 //載入時顯示寬度為120px}(this));} 利用<img>的onload 事件使圖片載入完成後計算其尺寸大小，如果超過500像素就顯示為500像素，否則顯示其默認寬度。 expression 不是符合WEB標準的做法，不到萬不得以不建議使用。但是不能不承認IE的很多擴展是不錯的，IE不應該被輕視!

Ⅱ 怎樣用css控制圖片自適應大小

1、首先用dw編輯器建立了一個靜態頁面

Ⅲ 怎樣讓圖片自適應窗口大小

如果網頁使用DIV
+
CSS做布局的話,
在必要地方建議使用
絕對定位
,不要使用浮動
如果使用浮動的話,那就做個自適應寬度的DIV........

Ⅳ 如何用CSS使圖片自適應顯示寬度

綣計嘰綣蠼嵊跋煲趁娌季幀W罾硐氳慕餼齜槳缸勻皇親遠傷趼醞跡婕暗暮筇üぷ鶻銜叢櫻肅SS進行控制是一個可以接受的捷徑。 如果用 width 屬性強行設定顯示尺寸似乎太不智能。幸好 Firefox/Opera/IE 7 都提供了 max-width 屬性支持。假定希望圖片顯示寬度不超過500像素，CSS可能如下: fit-image { border : 0； max-width : 500px；}讓我痛恨的 IE6 不支持 max-width 屬性，但是利用 IE 獨有的 expression 屬性可以迂迴的解決這個問題。 fit-image { border : 0； max-width : 500px； width: expression ( function(img){ img.onload=function(){ this.style.width = ； this.style.width = (this.width 500)？"500px":this.width "px"}；return 120px //載入時顯示寬度為120px}(this))；}利用<img 的 onload 事件使圖片載入完成後計算其尺寸大小，如果超過500像素就顯示為500像素，否則顯示其默認寬度。 expression 不是符合WEB標準的做法，不到萬不得以不建議使用。

Ⅳ 怎麼讓圖片自適應DIV高寬，不變形呢

可以這樣寫

$("img").each(function(){
		var$imgH=$(this).parent("div").outerHeight();
		var$imgW=$(this).parent("div").outerWidth();
		$(this).css({
			"width":$imgW,
			"height":$imgH
		})
	})

不過div大小如果超出圖片原來的解析度,圖片肯定會模糊的

Ⅵ html5 怎麼讓圖片自適應

圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同解析度的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調整大小（也就是在media query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。
如果是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480 < 寬度 <= 768，載入120px的圖片， 寬度> 768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。
這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。

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

Ⅷ 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;">

Ⅸ css怎麼讓圖片自適應

看什麼情況了
一是通過將該圖片設置為某個div的背景圖片，然後該div的長寬不使用絕對的px，使用相對的em或者rem。
二是將圖片設置display：block，設置圖片的長寬為rem或者em。
還是要看是什麼情況下來去自適應圖片的，

Ⅹ 怎麼讓圖片在手機端自適應大小

首先看一下圖片自適應的網頁。（本圖中的圖片大小剛好占滿瀏覽器）

首先，我們在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;
}

這時候刷新頁面，發現圖片已經自適應了。目的達成。