通过Js自动按比例缩放图片

最新推荐文章于 2026-05-20 06:49:00 发布

原创最新推荐文章于 2026-05-20 06:49:00 发布 · 734 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#function

本文介绍了一种图片自适应缩放的方法，通过计算图片的缩放参数来确保图片能够在指定区域内按照原始比例显示。该方法适用于前端开发中图片预览等功能。

       //图片按比例缩放入口,sender为图片框Id
        function onPreviewLoad(sender){   
            autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );   
        }   
        
        function autoSizePreview( objPre, originalWidth, originalHeight ){   
            var zoomParam = clacImgZoomParam( 110, 160, originalWidth, originalHeight );   
            objPre.style.width = zoomParam.width + 'px';   
            objPre.style.height = zoomParam.height + 'px';   
            objPre.style.marginTop = zoomParam.top + 'px';   
            objPre.style.marginLeft = zoomParam.left + 'px';   
        }   

    //图片大小比例调整
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){   
        var param = { width:width, height:height, top:0, left:0 };   
           
        if( width>maxWidth || height>maxHeight ){   
            rateWidth = width / maxWidth;   
            rateHeight = height / maxHeight;   
               
            if( rateWidth > rateHeight ){   
                param.width = maxWidth;   
                param.height = height / rateWidth;   
            }else{   
                param.width = width / rateHeight;   
                param.height = maxHeight;   
            }   
        }   
           
        param.left = (maxWidth - param.width) / 2;   
        param.top = (maxHeight - param.height) / 2;   
           
        return param;   
    }

//Html标签

this)”/>