图片等比例缩放

Posted by Turingdo Studio on April 10, 2017

图片等比例缩放代码片段

const target = e.target,
            h = target.naturalHeight,
            w = target.naturalWidth,
            r = h / w,
            height = window.innerHeight || window.screen.availHeight,
            width = window.innerWidth || window.screen.availWidth,
            rate = height / width;

        let imgStyle = {};

        if(r >= 3.5){
            // imgStyle.width = width + "px";
            // imgStyle.height = h * width / w + "px";
            target.setAttribute('long', true);
        }
         // 图片的高宽比大于屏幕的高宽比,则图片的高度取屏幕的高度
         // 图片的高宽比小于屏幕的高宽比,则图片的宽度取屏幕的宽度
        if(r > rate){
            imgStyle.height = height + "px";
            imgStyle.width = w * height / h + "px";
            imgStyle.left = width / 2 - (w * height / h) / 2 + "px";
        }else if( r < rate){
            imgStyle.width = width + "px";
            imgStyle.height = h * width / w + "px";
            imgStyle.top = height / 2 - (h * width / w) / 2 + "px"
        } else {
            imgStyle.width = width;
            imgStyle.height = height;
        }

        target.setAttribute('style', `width:${imgStyle.width}; height:${imgStyle.height}; left:${imgStyle.left}; top:${imgStyle.top};`);
        target.setAttribute('rate', 1/r);