Jquery是一款經(jīng)典的JavaScript庫,廣泛應(yīng)用于頁面交互效果的開發(fā)中。在實際開發(fā)中,經(jīng)常會遇到圖片尺寸不固定,需要對圖片進行自適應(yīng)調(diào)整的情況。jQuery提供了一個方便實用的方法,可以幫助我們輕松實現(xiàn)圖片的自適應(yīng)調(diào)整。
下面是使用Jquery實現(xiàn)圖片寬度高度自適應(yīng)的示例代碼:
$(function(){ $("img").each(function(){ var maxWidth = XX; //設(shè)置圖片最大寬度 var maxHeight = XX; //設(shè)置圖片最大高度 var imgWidth = $(this).width(); //獲取圖片寬度 var imgHeight = $(this).height(); //獲取圖片高度 //如果圖片寬高都小于最大值,則不做處理 if(imgWidth <= maxWidth && imgHeight <= maxHeight){ return; } //根據(jù)圖片的寬高比例計算縮放比例 var scale = imgWidth / imgHeight; if(imgWidth > maxWidth){ imgWidth = maxWidth; imgHeight = imgWidth / scale; } if(imgHeight > maxHeight){ imgHeight = maxHeight; imgWidth = imgHeight * scale; } //將計算出來的寬高賦值給圖片 $(this).attr("width", imgWidth); $(this).attr("height", imgHeight); }); });
上面的代碼中,我們首先遍歷了所有圖片,然后獲取了圖片的寬高以及最大寬度和最大高度,根據(jù)圖片的寬高比例計算出縮放比例,最后將縮放后的寬高賦值給圖片,實現(xiàn)了圖片的自適應(yīng)調(diào)整。
在實際開發(fā)中,我們可以根據(jù)具體情況調(diào)整最大寬度和最大高度的值,以適應(yīng)不同的設(shè)備和頁面布局。