js实现div内图片自适应大小 并裁剪

主要用js来重新计算图片的大小,


window.onload=function(){
        changeImgSize();
    }
    function changeImgSize(){
        var getContainer=document.getElementById('imgcontainer');//父元素div
        var getIMG=getContainer.getElementsByTagName('img')[0];
        var fw=getContainer.offsetWidth-(2*getContainer.clientLeft);
        var fh=getContainer.offsetHeight-(2*getContainer.clientTop);
        var iw=getIMG.width;
        var ih=getIMG.height;
        var m=iw/fw;//图片与父元素宽度比
        var n=ih/fh;//图片与父元素高度比
        if(m>=1&&n<=1)//图片比父元素宽 或者图片比父元素短
        {
//            iw=Math.ceil(iw/m);
//            ih=Math.ceil(ih/m);
//            getIMG.width=iw;
//            getIMG.height=ih;
            iw=Math.ceil(iw/n);
            ih=Math.ceil(ih/n);
            getIMG.width=iw;
            getIMG.height=ih;
        }
        else if(m<=1&&n>=1)//图片比父元素窄 或者图片比父元素高
        {
            iw=Math.ceil(iw/m);
            ih=Math.ceil(ih/m);
            getIMG.width=iw;
            getIMG.height=ih;
        }
        else if(m>=1&&n>=1)
        {

            getMAX=Math.min(m,n);
            iw=Math.ceil(iw/getMAX);
            ih=Math.ceil(ih/getMAX);
            getIMG.width=iw;
            getIMG.height=ih;
        }
//        if(getIMG.height<fh)
//        {
//            var getDistance=Math.floor((fh-getIMG.height)/2);
         //   getIMG.style.marginTop=getDistance.toString()+"px";
        var getDistance;
        var getDistance2;
        if(fh>getIMG.height){
            getDistance=Math.floor((fh-getIMG.height)/2);
            getIMG.style.marginTop=getDistance.toString()+"px";
        }else {
            getDistance=Math.floor((getIMG.height-fh)/2);
            getIMG.style.marginTop="-"+getDistance.toString()+"px";
        }

        if(fw>getIMG.width){
            getDistance2=Math.floor((fw-getIMG.width)/2);
            getIMG.style.marginLeft=getDistance2.toString()+"px";
        }else {
            getDistance2=Math.floor((getIMG.width-fw)/2);
            getIMG.style.marginLeft="-"+getDistance2.toString()+"px";
        }

    }
 
 
html中:
<div class="sy_pic" id="imgcontainer"><img src="${contextPath}/content/images/logo_02.png" /></div>


css样式:
.sy_pic{
    width:200px;
    height:300px;
    text-align:center;
    overflow: hidden;
    border:#000 solid 5px;
}


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值