亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局

 更新時(shí)間：2013年10月16日 16:03:02   作者：  
遇到大圖片將頁(yè)面容器“撐破”的情況在進(jìn)行頁(yè)面布局時(shí)會(huì)經(jīng)常遇到吧，在本文將為大家講述使用jQuery實(shí)現(xiàn)按比例縮放大圖片，讓大圖片自適應(yīng)頁(yè)面布局
在布局頁(yè)面時(shí)，有時(shí)會(huì)遇到大圖片將頁(yè)面容器“撐破”的情況，尤其是加載外鏈圖片（通常是通過(guò)采集的外站的圖片）。那么本文將為您講述使用jQuery如何按比例縮放大圖片，讓大圖片自適應(yīng)頁(yè)面布局。

通常我們處理縮略圖是使用后臺(tái)代碼（PHP、.net、Java等）根據(jù)大圖片生成一定尺寸的縮略圖，來(lái)供前臺(tái)頁(yè)面調(diào)用，當(dāng)然也有使用前臺(tái)javascript腳本將加載后的大圖強(qiáng)行縮放，變成所謂的縮略圖，這種方法不可取。但是，針對(duì)網(wǎng)站內(nèi)容頁(yè)，如本站文章詳情頁(yè)，如果需要加載一張很大的圖片時(shí)，為了防止“撐破”布局，我們使用jQuery來(lái)等比例縮放圖片。我們分兩種情況來(lái)講述：

1.已知圖片尺寸
復(fù)制代碼 代碼如下:

<div id="demo1">
<img src="a.jpg" width="800" height="300" alt="圖片">
</div>

當(dāng)頁(yè)面加載的圖片中含有屬性width和height值，則可以使用幾句簡(jiǎn)單的jQuery代碼實(shí)現(xiàn)等比例縮放。
復(fù)制代碼 代碼如下:

$(function(){
var w = $("#demo1").width();//容器寬度
$("#demo1 img").each(function(){//如果有很多圖片，我們可以使用each()遍歷
var img_w = $(this).width();//圖片寬度
var img_h = $(this).height();//圖片高度
if(img_w>w){//如果圖片寬度超出容器寬度--要撐破了
var height = (w*img_h)/img_w; //高度等比縮放
$(this).css({"width":w,"height":height});//設(shè)置縮放后的寬度和高度
}
});
});

2.未知圖片尺寸

當(dāng)頁(yè)面加載的圖片尺寸未知的情況下，上述代碼則不能進(jìn)行有效的縮放，這種情況多出現(xiàn)在采集的外部鏈接圖片。
復(fù)制代碼 代碼如下:

<div id="demo2">
<img src="a.jpg" alt="圖片">
</div>

所幸的是，有好心朋友已經(jīng)寫(xiě)出來(lái)專(zhuān)門(mén)的插件來(lái)處理，而且跨瀏覽器，解決了前端朋友們的一大難題。

下面隆重介紹下autoIMG。

autoIMG可以快速對(duì)文章圖片進(jìn)行尺寸自適應(yīng)，它利用瀏覽器獲取圖片文件頭尺寸數(shù)據(jù)，無(wú)需等待圖片加載完成。

autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...

調(diào)用autoIMG插件方法相當(dāng)簡(jiǎn)單：
復(fù)制代碼 代碼如下:

$(function(){
$("#demo2").autoIMG();
});

autoIMG實(shí)例下載

相關(guān)文章

最新評(píng)論