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

最新推荐文章于 2022-05-07 15:34:54 发布

hnyysly

最新推荐文章于 2022-05-07 15:34:54 发布

阅读量7.6k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/hnyysly/article/details/17610537

版权

前端开发专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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]);
       }
     }
}