首頁 >web前端 >css教學 >如何使用CSS調整圖片大小的實例代碼分享

如何使用CSS調整圖片大小的實例代碼分享

黄舟
黄舟原創
2017-07-26 13:37:157391瀏覽

  通常,我們可以為圖片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 = &#39;<img src="&#39;+attachUrl+&#39;" width="&#39;+img.width+&#39;" height="&#39;+img.height+&#39;" alt="&#39;+filename+&#39;"/>&#39;;


2、在載入完DOM後即調整大小
雖然CSS的expression方式將會被取消,但直接使用JavaScript方式計算合適的CSS值還是一個不錯的方法。例如jQuery的$(document).ready()方法可以避免載入圖片時溢出的問題。
以下腳本來自:這裡

$(document).ready(function() {
    $(&#39;.post img&#39;).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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn