利用javascript实现图片等比例缩放

最新推荐文章于 2024-05-06 20:13:12 发布

D564457199

最新推荐文章于 2024-05-06 20:13:12 发布

阅读量135

点赞数

分类专栏： JavaScript 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/D564457199/article/details/83332417

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解决了我很苦恼的图片走形问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  <html xmlns="http://www.w3.org/1999/xhtml">  
  <head>  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>图片等比例绽放</title>  
 </head>  
 <body>  
 <img src="zz.gif" id="Image1"/>  
</body>  
 </html>  
 <script language="javascript" type="text/javascript">   
 function DrawImage()   
 {   
     var FitWidth = 200,FitHeight = 200;  
     var ImgD = document.getElementById('Image1');  
     var image = new Image();  
    image.src=ImgD.src;  
    if(image.width>0 && image.height>0)   
     {   
         if(image.width/image.height>= FitWidth/FitHeight)   
         {   
             if(image.width>FitWidth)   
             {   
                ImgD.width=FitWidth;   
                 ImgD.height=(image.height*FitWidth)/image.width;   
             }   
            else   
            {   
                 ImgD.width=image.width;   
                ImgD.height=image.height;   
             }   
         }   
         else   
        {   
            if(image.height>FitHeight)   
            {   
                ImgD.height=FitHeight;   
                 ImgD.width=(image.width*FitHeight)/image.height;   
            }   
            else   
            {   
                 ImgD.width=image.width;   
                ImgD.height=image.height;   
            }   
         }   
     }   
 }   
    
  DrawImage();  
   </script>

D564457199

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用javascript实现图片等比例缩放

解决了我很苦恼的图片走形问题&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
复制链接

扫一扫

专栏目录