最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

JS控制图片显示的大小(图片等比例缩放)

Javascript rockyxia 8806浏览 0评论

正文直接开始

在网页中放图片的时候我们经常会遇到图片变形的问题,今天给大家分享一个等比例压缩图片的js,可以设置最大宽高,然后等比例自动压缩。

<script type="text/javascript">
function AutoResizeImage(maxWidth,maxHeight,objImg){
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth ==0 && maxHeight==0){
        Ratio = 1;
    }else if (maxWidth==0){
        if (hRatio<1) Ratio = hRatio;
    }else if (maxHeight==0){
        if (wRatio<1) Ratio = wRatio;
    }else if (wRatio<1 || hRatio<1){
        Ratio = (wRatio<=hRatio?wRatio:hRatio);
    }
    if (Ratio<1){
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}
</script>

在对应的img上增加onload=”AutoResizeImage(width,height,this)这句即可。

例如:

<img src="#" onload="AutoResizeImage(200,150,this)" alt="200 X 150"/>

转载请注明:Rockyxia Web技术博客 » JS控制图片显示的大小(图片等比例缩放)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)