图片等比例缩放 居中显示到div 超出div的部分影藏

    Div中嵌套Img,让图片等比例缩放,要实现的效果就是,图片大于Div的大小,让图片在Div里居中显示,超过部分隐藏,图片小于Div的大小,先把图片等比例放大,超出部分隐藏。

<div style="width:94px;height:94px;border:1px solid #939ea9 ;padding:1px;">
   <div  style="overflow:hidden;width:94px;height:94px;">
      <img class="small" style='' src='pic/pic.jpg' onLoad="loadPIc(94,94,this)" />                             
   </div>
</div>


js 代码:

function loadPIc(maxWidth,maxHeight,obj){
	imgWidth=obj.width;
	imgHeight=obj.height;
	//alert(imgWidth);
	//alert(imgHeight);
	AutoResizeImage(imgWidth,imgHeight,maxWidth,maxHeight,obj);
}
function AutoResizeImage(imgWidth,imgHeight,maxWidth,maxHeight,objImg){
    var hRatio;
    var wRatio;
    var Ratio = 1;

    wRatio = maxWidth / imgWidth;
    hRatio = maxHeight / imgHeight;

    Ratio = (wRatio>=hRatio?wRatio:hRatio);
    imgWidth = imgWidth * Ratio;
    imgHeight = imgHeight * Ratio;
    
      
    if(imgWidth > imgHeight){
    	var pad=(imgWidth-maxWidth)/2;
        $(objImg).css("margin-left",-pad+"px");
       // $(objImg).css("left","-20px");
    }else if(imgHeight > maxHeight){
    	var pad=(imgHeight-maxHeight)/2;
        $(objImg).css("margin-top",-pad+"px");
    }
    
    $(objImg).attr('width',imgWidth);
    $(objImg).attr('height',imgHeight);
    $(objImg).css('width',imgWidth);
    $(objImg).css('height',imgHeight);
    //alert(objImg.width);
   // alert(objImg.height);
}
为了解决图片加载完后重新加载不再执行loadPic()的问题,图片就不会等比例压缩且居中显示,这样可以在wind的onLoad事件中对图片进行处理。

window.οnlοad=function(){
    var imgs = document.getElementsByTagName("img");
    for(var j=0;j<imgs.length;j++){
       if(imgs[j]=='small'){
         loadPic(94,94,imgs[j]);
       }
       else if(imgs[j]=='middle'){
         
        loadPic(245,200,imgs[j]);
       }else if(imgs[j]=='big'){
         
        loadPic(520,422,imgs[j]);
       }
     }
}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值