jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery

在佈局頁面時，有時會遇到大jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery將頁面容器「撐破」的情況，尤其是加載外鏈jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery（通常是透過採集的外站的jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery）。那麼本文將為您講述使用jQuery如何按比例縮放jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery，讓大jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery自適應頁面佈局。

通常我們處理縮圖是使用後台程式碼（PHP、.net、Java等）根據大jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery產生一定尺寸的縮圖，來供前台頁面調用，當然也有使用前台javascript腳本將加載後的大圖強行縮放，變成所謂的縮圖，這種方法不可取。但是，針對網站內容頁，如本站文章詳情頁，如果需要加載一張很大的jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery時，為了防止“撐破”佈局，我們使用jQuery來等比例縮放jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery。我們分成兩種情況來敘述：

1. 已知jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery尺寸

複製程式碼 代碼如下:

當頁面載入的jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery中含有屬性width和height值，則可以使用幾句簡單的jQuery程式碼實現等比例縮放。

複製程式碼 程式碼如下:

$(function(){


$(function(){
var = $("#demo1").width();//容器寬度
$("#demo1 img").each(function(){//如果有很多jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery，我們可以使用each()遍歷
var img_w = $(this).width();//jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery寬度
var img_h = $(this).height();//jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery高度
if(img_w>w){//如果jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery寬度超出容器寬度--要撐破了
var height = (w*img_h)/img_w; //高度等比縮放
$(this).css({"width":w,"height" :height});//設定縮放後的寬度和高度
}

});
});


2.未知jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery尺寸

當頁面載入的jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery尺寸未知的情況下，上述程式碼則不能進行有效的縮放，這種情況多出現在採集的外部連結jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery。 複製程式碼

程式碼如下:

所幸的是，有好心朋友已經寫出來專門的插件來處理，而且跨瀏覽器，解決了前端朋友們的一大難題。

下面隆重介紹下autoIMG。

autoIMG可以快速對文章jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery進行尺寸自適應，它利用瀏覽器獲取jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery檔案頭尺寸數據，無需等待jQuery實現等比例縮放圖片讓大圖片自適應頁面佈局_jquery載入完成。 autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ... 調用autoIMG插件方法相當簡單：

複製程式碼


程式碼如下:

$(function(){ $("#demo2").autoIMG(); }); autoIMG實例下載