通常,我們可以給圖片<img>設定一個CSS屬性,定義其高度和寬度。但有時候,我們只希望控製圖片的最大可見大小。這樣的操作,一般有兩種辦法:1.直接使用CSS屬性值;2.使用JavaScript動態設定CSS值。
一、固定大小
一般,為了限制圖片的大小,會使用下面的HTML 屬性值或CSS屬性值來定義:
<img src="http://www.linuxfly.org/logo.gif" width="600" height="500" border="0">img { width: 600px; height: 500px;}
但這樣的設定太死板,不夠靈活。
二、利用CSS屬性值
img.qtipImg { max-width: 500px; width: 500px; width:expression(this.width > 500 ? "500px" : this.width); overflow:hidden;}
這裡定義了一個qtipImg類下面的img標籤用CSS規則,通過max-width屬性把圖片控制在500px的寬度範圍,並且是自適應比例的。
但是,各瀏覽器對該屬性的支援並不一致,如IE6不支援該屬性。
所以,後面又增加了一個expression的動作,該操作符後面括弧中的語句是JavaScript指令碼,用於動態調整圖片大小的。
而最後的,overflow:hidden 則是為了防止上述兩屬性定義失效時,將超出設定大小的部分隱藏起來,避免顯示異常。
該設定經測試,在IE7、IE8、FireFox 3.5 下使用都很正常。
三、利用JavaScript 指令碼
每個瀏覽器(包括版本不同)對CSS的支援都會有區別。例如:IE 8下就取消了對expression動作的支援。這時,利用JavaScript來調整圖片大小也是一個不錯的方法。但它的缺陷在於,使用純JavaScript指令碼,在圖片下載期間,大小會溢出,直到下載完成,JavaScript才會把其大小調整到合適的值。
1、藉助一個中轉的Image對象
兩個JavaScript函數:
function getImageSize(FilePath) { var imgSize={width:0,height:0}; image=new Image(); image.src=FilePath; imgSize.width = image.width; imgSize.height = image.height; return imgSize; }function fixImageSize(originalImage) { fixSize = 500; if ( originalImage.width > fixSize ) { originalImage.height = Math.round( originalImage.height * fixSize / originalImage.width ); originalImage.width = fixSize; } return originalImage;}
使用時,把圖片的地址傳遞給這兩個函數,傳回值即為調整後的圖片:
img = getImageSize("http://www.linuxfly.org/logo.gif");img = fixImageSize(img);finalresult = '<img src="'+attachUrl+'" width="'+img.width+'" height="'+img.height+'" alt="'+filename+'"/>';
2、在載入完DOM後即調整大小
雖然CSS的expression方式將會被取消,但直接使用JavaScript方式計算合適的CSS值還是一個不錯的方法。例如jQuery的$(document).ready()方法可以避免載入圖片時溢出的問題。
以下指令碼來自:這裡
$(document).ready(function() { $('.post img').each(function() { var maxWidth = 100; // 圖片最大寬度 var maxHeight = 100; // 圖片最大高度 var ratio = 0; // 縮放比例 var width = $(this).width(); // 圖片實際寬度 var height = $(this).height(); // 圖片實際高度 // 檢查圖片是否超寬 if(width > maxWidth){ ratio = maxWidth / width; // 計算縮放比例 $(this).css("width", maxWidth); // 設定實際顯示寬度 height = height * ratio; // 計算等比例縮放後的高度 $(this).css("height", height * ratio); // 設定等比例縮放後的高度 } // 檢查圖片是否超高 if(height > maxHeight){ ratio = maxHeight / height; // 計算縮放比例 $(this).css("height", maxHeight); // 設定實際顯示高度 width = width * ratio; // 計算等比例縮放後的高度 $(this).css("width", width * ratio); // 設定等比例縮放後的高度 } });});