zoukankan      html  css  js  c++  java
  • 牛掰的图片等比缩放js代码

    function resizeImg(img,oAW,oAH){
    var oimgW = img.width,
    oimgH = img.height,
    oimg = img,
    oY = (oimgH/oimgW).toFixed(2),
    oX = (oimgW/oimgH).toFixed(2);
    if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
    oimg.style.height = oimgH+'px';
    oimg.style.width = oimgW+'px';
    } else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
    if(oY*oAW>=oAH){ //图片高比宽大
    oimg.style.height = oAH+'px';
    oimg.style.width = oX*oAH+'px';
    }else{ //图片高比宽小
    oimg.style.height = oY*oAW+'px';
    oimg.style.width = oAW+'px';
    }
    }else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
    oimg.style.height = oY*oAW+'px';
    oimg.style.width = oAW+'px';
    }else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
    oimg.style.height = oAH+'px';
    oimg.style.width = oX*oAH+'px';
    }
    }
    function resizeImgMid(img,oAW,oAH){
    var oimgW = img.width,
    oimgH = img.height,
    oimg = img,
    oY = (oimgH/oimgW).toFixed(2),
    oX = (oimgW/oimgH).toFixed(2);
    if(oimgW <= oAW&&oimgH <= oAH){//图片高和宽比指定的宽高都小
    oimg.style.height = oimgH+'px';
    oimg.style.width = oimgW+'px';
    oimg.style.marginLeft = 1/2*(oAW-oimgW)+'px';
    oimg.style.marginTop = 1/2*(oAH-oimgH)+'px';
    } else if(oimgW >= oAW&&oimgH >= oAH){//图片高和宽比指定的宽高都大
    if(oY*oAW>=oAH){ //图片高比宽大
    oimg.style.height = oAH+'px';
    oimg.style.width = oX*oAH+'px';
    oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
    oimg.style.marginTop = 0;
    }else{ //图片高比宽小
    oimg.style.width = oAW+'px';
    oimg.style.height = oY*oAW+'px';
    oimg.style.marginLeft = 0;
    oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
    }
    }else if(oimgW>oAW &&oimgH < oAH){//图片宽比指定宽大,高比指定的小
    oimg.style.height = oY*oAW+'px';
    oimg.style.width = oAW+'px';
    oimg.style.marginLeft = 0;
    oimg.style.marginTop = 1/2*(oAH-oY*oAW)+'px';
    }else if(oimgW<oAW &&oimgH > oAH){//图片宽比指定宽小,高比指定的大
    oimg.style.height = oAH+'px';
    oimg.style.width = oX*oAH+'px';
    oimg.style.marginLeft = 1/2*(oAW-oX*oAH)+'px';
    oimg.style.marginTop = 0;
    }
    }

  • 相关阅读:
    【HTML】WebStorage
    【vue.js】vue项目使用Iconfont(阿里图标库)
    【CSS】水平居中和垂直居中
    【设计模式】责任链模式
    【设计模式】观察者模式
    【设计模式】策略模式
    【排序算法】(9)堆排序
    【排序算法】(5)基数排序
    【排序算法】(6)选择排序
    简单权限设计表
  • 原文地址:https://www.cnblogs.com/freefish12/p/4347321.html
Copyright © 2011-2022 走看看