码迷,mamicode.com
首页 > 其他好文 > 详细

图片等比缩放到指定区域

时间:2018-01-04 18:15:57      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:拉伸   指定   idt   eww   显示   size   blog   div   垂直   

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

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值,为了水平方向居中,然后再将这四个样式值应用到图片上就可以了。
这样无论你的图片和指定区域是怎样比例的矩形都能够等比展示出来,不压缩,不拉伸。

图片等比缩放到指定区域

标签:拉伸   指定   idt   eww   显示   size   blog   div   垂直   

原文地址:https://www.cnblogs.com/superior0325/p/8194098.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!