從這裡開始,分享你喜歡的資訊!

jquery實現等比例縮放圖片

在網站開發過程中通常要顯示各種尺寸的圖片,但圖片的尺寸不一定符合顯示的要求。如果直接指定img的width和height屬性的話圖片又很可能會被擠壓的變形。下面這個代碼可以把圖片放進一個imgBox,並根據imgBox的大小來按比例縮放圖片以適應他,同時圖片會在imgBox中居中顯示。來看代碼:



HTML代碼:

[table=95%]                    







按比例自動縮放圖片











   





                        

JavaScript代碼:

[table=95%]                    
function DrawImg(boxWidth,boxHeight)

{

    var imgWidth=$("#img1").width();

    var imgHeight=$("#img1").height();

    //比較imgBox的長寬比與img的長寬比大小

    if((boxWidth/boxHeight)>=(imgWidth/imgHeight))

    {

        //重新設置img的width和height

        $("#img1").width((boxHeight*imgWidth)/imgHeight);

        $("#img1").height(boxHeight);

        //讓圖片居中顯示

        var margin=(boxWidth-$("#img1").width())/2;

        $("#img1").css("margin-left",margin);

    }

    else

    {

        //重新設置img的width和height

        $("#img1").width(boxWidth);

        $("#img1").height((boxWidth*imgHeight)/imgWidth);

        //讓圖片居中顯示

        var margin=(boxHeight-$("#img1").height())/2;

          $("#img1").css("margin-top",margin);

    }

}

?>                         
相关网址