DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS+css 圖片自動縮放自適應大小
JS+css 圖片自動縮放自適應大小
編輯:關於JavaScript     
我加了css的限制:
復制代碼 代碼如下:
div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏覽器下最大寬度為600px。但在IE6中無效。
 ◎ width:600px; 在所有浏覽器中圖片的大小為600px;
 ◎ 當圖片大小大於600px,自動縮小為600px。在IE6中有效。
 ◎ overflow:hidden; 超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形。
在放圖片的頁面裡加了
復制代碼 代碼如下:
<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
 imgObj = document . getElementsByTagName("img")[i];
 //建議只判斷高度或者寬度其中一個,那樣可以自動按比例縮放
 if ( imgObj . width > 500 ) //判斷圖片的寬度,如果大於700,則設置為700,值可以自己修改
 {
  imgObj . width = 500
 }
 if ( imgObj . height > 700 ) //判斷圖片的高度,如果大於700,則設置為700,值可以自己修改
 {
  imgObj . height = 700
 }
}
</script>

單獨的圖片控制,用這個:
復制代碼 代碼如下:
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>

測試在IE和FF下通過。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved