通常,我們可以為圖片a1f02c36ba31691bcfe87b2722de723b設定一個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); // 设定等比例缩放后的高度 } }); });
以上是如何使用CSS調整圖片大小的實例代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!