javascript图片按比例自适应缩放实现代码

作者:袖梨 2022-06-25

 

   

   

    查看原图

window.onload = function() {
    var img =  document.getElementById('img'),

        /**
         * 图片按比例自适应缩放
         * @param img {Element} 用户上传的图片
         * @param maxWidth {Number} 预览区域的最大宽度
         * @param maxHeight {Number} 预览区域的最大高度
         */
        resizeImg = function(img, maxWidth, maxHeight){
            var w = img.width,
                h = img.height;

            // 当图片比预览区域小时不做任何改变
            if(w < maxWidth && h < maxHeight) return;       

            // 当实际图片比例大于预览区域宽高比例时
            // 缩放图片宽度,反之缩放图片宽度
            w/h > maxWidth/maxHeight  ? img.width = maxWidth : img.height = maxHeight;
    };
       
   
    resizeImg(img, 500, 300);
}

相关文章

精彩推荐