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