在布局頁面時(shí),有時(shí)會(huì)遇到大圖片將頁面容器“撐破”的情況,尤其是加載外鏈圖片(通常是通過采集的外站的圖片)。那么本文將為您講述使用jQuery如何按比例縮放大圖片,讓大圖片自適應(yīng)頁面布局。
通常我們處理縮略圖是使用后臺(tái)代碼(PHP、.net、Java等)根據(jù)大圖片生成一定尺寸的縮略圖,來供前臺(tái)頁面調(diào)用,當(dāng)然也有使用前臺(tái)javascript腳本將加載后的大圖強(qiáng)行縮放,變成所謂的縮略圖,這種方法不可取。但是,針對(duì)網(wǎng)站內(nèi)容頁,如本站文章詳情頁,如果需要加載一張很大的圖片時(shí),為了防止“撐破”布局,我們使用jQuery來等比例縮放圖片。我們分兩種情況來講述:
1.已知圖片尺寸
復(fù)制代碼 代碼如下:
<div>
<img src="a.jpg" alt="圖片">
</div>
復(fù)制代碼 代碼如下:
$(function(){
$("#demo2").autoIMG();
});
新聞熱點(diǎn)
疑難解答
圖片精選