图片等比缩放到指定区域

Posted 2020-10-19 superior0325

经常会遇到将图片等比缩放到某个特定大小的区域内，比如，预览图片、图片全屏显示等等，自己写了一个方法直接返回适应后的图片大小。

function getimagesize(imgSrc, imgW, imgH) {

    // 定义返回的大小
    var imgNewSize = {};
    //获取图片
    // 定义新的宽高
    var neww = 0,newh = 0,mt = 0,ml = 0;
    // 获取原本宽高
    var imgLayerW = imgSrc.width;
    var imgLayerH = imgSrc.height;


    var rateW = imgW / imgLayerW,rateH = imgH / imgLayerH;
    if(rateW < rateH){
        neww = imgLayerW * rateW;
        newh = imgLayerH * rateW
        mt = (imgH - newh) / 2;
    } else{
        neww = imgLayerW * rateH;
        newh = imgLayerH * rateH;
        ml = (imgW - neww) / 2;
    }

    imgNewSize["w"] = neww;
    imgNewSize["h"] = newh;
    imgNewSize["mt"] = mt;
    imgNewSize["ml"] = ml;
    return imgNewSize;
}

　　

第一个参数imgSrc,代表要设置等比缩放的图片对象；第二个参数imgW,代表特定区域的宽度；第三个参数imgH，代表特定区域的高度。返回值是一个数组对象，w：新的宽度；h：新的高度；mt：等比缩放后的margin-top值，为了垂直方向
居中；ml：等比缩放后margin-left值，为了水平方向居中，然后再将这四个样式值应用到图片上就可以了。
这样无论你的图片和指定区域是怎样比例的矩形都能够等比展示出来，不压缩，不拉伸。