js 可以控制图片的大小

lqscoke

于 2007-06-15 05:08:00 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： 1.0 JavaScript 文章标签： image javascript border blog html function

本文链接：https://blog.youkuaiyun.com/lqscoke/article/details/1653116

1.0 JavaScript 专栏收录该内容

61 篇文章

订阅专栏

本文提供了一段JavaScript代码，用于实现网页中图片的自适应显示。通过调整图片宽度和高度，确保图片能在不同分辨率的屏幕上正常展示，同时保持原有的宽高比，避免图片变形。

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

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<script language="javascript">
var flag=false;   //控制小图
function DrawImage(ImgD,maxwidth,maxheight){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>=maxwidth/maxheight){
     if(image.width>maxwidth){
     ImgD.width=maxwidth;
     ImgD.height=(image.height*maxwidth)/image.width;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    else{
     if(image.height>maxheight){
     ImgD.height=maxheight;
     ImgD.width=(image.width*maxheight)/image.height;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     }
    }
   }
</script>

</HEAD>

<BODY>
<IMG  src= "https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/lqscoke/310096/r_image003.jpg" border=0  onload="javascript:DrawImage(this,300,240);">

<br></br>
<IMG  src= "https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/lqscoke/310096/r_image003.jpg" border=0 width=300 height=240>

</BODY>

</HTML>