溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
jQuery中怎么實現(xiàn)等比例縮放大圖片，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
<p id="demo1">
<img src="a.jpg" width="800" height="300" alt="">
</p>
當(dāng)頁面加載的圖片<img>中含有屬性width和height值，則可以使用幾句簡單的jQuery代碼實現(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è)置縮放后的寬度和高度
}
});
});
當(dāng)頁面加載的圖片尺寸未知的情況下，上述代碼則不能進行有效的縮放，這種情況多出現(xiàn)在采集的外部鏈接圖片。
<p id="demo2">
<img src="http://ww1.sinaimg.cn/large/63826f14jw1e1w67g8tdfj.jpg" alt="">
</p>
調(diào)用autoIMG插件方法相當(dāng)簡單：
$(function(){
$("#demo2").autoIMG();
});
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
