jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
更新時(shí)間：2013年10月16日 16:03:02 作者：
遇到大圖片將頁面容器“撐破”的情況在進(jìn)行頁面布局時(shí)會(huì)經(jīng)常遇到吧，在本文將為大家講述使用jQuery實(shí)現(xiàn)按比例縮放大圖片，讓大圖片自適應(yīng)頁面布局
在布局頁面時(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.已知圖片尺寸
<div id="demo1">
<img src="a.jpg" width="800" height="300" alt="圖片">
</div>
當(dāng)頁面加載的圖片中含有屬性width和height值，則可以使用幾句簡(jiǎn)單的jQuery代碼實(shí)現(xiàn)等比例縮放。
$(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)頁面加載的圖片尺寸未知的情況下，上述代碼則不能進(jìn)行有效的縮放，這種情況多出現(xiàn)在采集的外部鏈接圖片。
<div id="demo2">
<img src="a.jpg" alt="圖片">
</div>
所幸的是，有好心朋友已經(jīng)寫出來專門的插件來處理，而且跨瀏覽器，解決了前端朋友們的一大難題。
下面隆重介紹下autoIMG。
autoIMG可以快速對(duì)文章圖片進(jìn)行尺寸自適應(yīng)，它利用瀏覽器獲取圖片文件頭尺寸數(shù)據(jù)，無需等待圖片加載完成。
autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...
調(diào)用autoIMG插件方法相當(dāng)簡(jiǎn)單：
$(function(){
$("#demo2").autoIMG();
});
autoIMG實(shí)例下載
通常我們處理縮略圖是使用后臺(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 id="demo1">
<img src="a.jpg" width="800" height="300" alt="圖片">
</div>
當(dāng)頁面加載的圖片中含有屬性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)頁面加載的圖片尺寸未知的情況下，上述代碼則不能進(jìn)行有效的縮放，這種情況多出現(xiàn)在采集的外部鏈接圖片。
復(fù)制代碼 代碼如下:
<div id="demo2">
<img src="a.jpg" alt="圖片">
</div>
所幸的是，有好心朋友已經(jīng)寫出來專門的插件來處理，而且跨瀏覽器，解決了前端朋友們的一大難題。
下面隆重介紹下autoIMG。
autoIMG可以快速對(duì)文章圖片進(jìn)行尺寸自適應(yīng)，它利用瀏覽器獲取圖片文件頭尺寸數(shù)據(jù)，無需等待圖片加載完成。
autoIMG兼容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...
調(diào)用autoIMG插件方法相當(dāng)簡(jiǎn)單：
復(fù)制代碼 代碼如下:
$(function(){
$("#demo2").autoIMG();
});
autoIMG實(shí)例下載
您可能感興趣的文章:
- 基于jquery的防止大圖片撐破頁面的實(shí)現(xiàn)代碼(立即縮放)
- jQuery+css實(shí)現(xiàn)的點(diǎn)擊圖片放大縮小預(yù)覽功能示例【圖片預(yù)覽 查看大圖】
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對(duì)應(yīng)大圖片功能【測(cè)試可用】
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過預(yù)覽圖片大圖效果的方法
- jQuery實(shí)現(xiàn)大圖輪播
- jQuery實(shí)現(xiàn)的小圖列表，大圖展示效果幻燈片示例
- jquery插件jquery.LightBox.js實(shí)現(xiàn)點(diǎn)擊放大圖片并左右點(diǎn)擊切換效果(附demo源碼下載)
- jQuery實(shí)現(xiàn)點(diǎn)擊小圖片淡入淡出顯示大圖片特效
- jQuery實(shí)現(xiàn)點(diǎn)擊查看大圖并以彈框的形式居中
- 基于jQuery插件實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖效果
- jquery實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖特效
- jQuery實(shí)現(xiàn)點(diǎn)擊小圖顯示大圖代碼分享
- jquery 圖片點(diǎn)擊放大預(yù)覽功能詳解
相關(guān)文章
使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中，使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.2011-03-03
jQuery實(shí)現(xiàn)圖像旋轉(zhuǎn)動(dòng)畫效果
jquery動(dòng)畫旋轉(zhuǎn)效果在項(xiàng)目中經(jīng)常遇到這樣的需求，下面小編給大家分享具體實(shí)現(xiàn)代碼，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
jQuery幻燈片特效代碼分享 鼠標(biāo)滑過按鈕時(shí)切換（2）
本文實(shí)例講述了jQuery實(shí)現(xiàn)時(shí)尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點(diǎn)圖)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
用jquery實(shí)現(xiàn)的彈出菜單插件2008-12-12
本篇文章是對(duì)jQuery中常用的元素查找方法進(jìn)行了詳細(xì)的總結(jié)和介紹，,同時(shí)附送示例,是篇非常不錯(cuò)的文章,需要的朋友參考下2015-09-09
這篇文章主要介紹了jQuery的基本概念與高級(jí)編程的簡(jiǎn)單介紹，有需要的小伙伴可以參考下。2015-05-05
jQuery獲取注冊(cè)信息并提示實(shí)現(xiàn)代碼
當(dāng)點(diǎn)擊提交信息的時(shí)候，會(huì)把用戶在注冊(cè)甜的信息收集并以div彈出的方式提示個(gè)用戶預(yù)覽以確定信息的準(zhǔn)確性，感興趣的朋友可以參考下，希望對(duì)你有所幫助2013-04-04
jQuery EasyUI 對(duì)話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個(gè)按鈕2010-10-10
需要:Struts2 , jquery樹插件 模擬數(shù)據(jù)庫數(shù)據(jù):每行數(shù)據(jù)包括--自己ID,自己內(nèi)容,父親ID2009-10-10
jQuery實(shí)現(xiàn)根據(jù)滾動(dòng)條位置加載相應(yīng)內(nèi)容功能
這篇文章主要實(shí)現(xiàn)了jQuery根據(jù)滾動(dòng)條位置加載相應(yīng)內(nèi)容的操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07