JS使圖片在圖片框中自適應,按比例縮放


<script type="text/javascript">

        //ImgD:要放圖片的img元素,onload時傳參可用this

        //h:img元素的高度,像素

        //w:img元素的寬度,像素
        function autosize2(ImgD,h,w)
        {
            var image=new Image(); 
            image.src=ImgD.src; 
            if (image.width<w && image.height<h)
            {
                ImgD.width=image.width;
                ImgD.height=image.height;
            }
            else
            {
                if (w / h <= image.width / image.height)
                {
                    ImgD.width=w;
                    ImgD.height=w * (image.height / image.width);
                }
                else
                {
                    ImgD.width=h * (image.width / image.height);
                    ImgD.height=h;
                }
            }
            
            //圖片居中,IE8有效果,IE9,火狐無效果,請在頁面用table居中
            //ImgD.style.paddingLeft = (w + 20 - ImgD.width) / 2;   //20是指padding-left和padding-right距離的和
            //ImgD.style.paddingTop=(h + 20 -ImgD.height) / 2;     //20是指padding-top和padding-bottom距離的和
        }
    </script>

 

     在圖上加載時調用這個函數(img的onload事件)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM