按长宽比调整大小的图片(js)

最新推荐文章于 2023-05-25 15:15:42 发布

原创最新推荐文章于 2023-05-25 15:15:42 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个JavaScript函数，用于实现图片的自适应显示效果。当图片加载完成后，该函数通过比较图片原始尺寸与指定尺寸的比例来调整图片大小，确保图片能够在不同尺寸的容器中保持原有比例并完全显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用函数如下：

//var flag=false; 
function DrawImage(ImgD,ImgW,ImgH){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    //flag=true; 
    if(image.width/image.height>= ImgW/ImgH){
     if(image.width>ImgW){  
     ImgD.width=ImgW;
     ImgD.height=(image.height*ImgW)/image.width;
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     }
    else{
     if(image.height>ImgH){  
     ImgD.height=ImgH;
     ImgD.width=(image.width*ImgH)/image.height;     
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     }
    }
} 