代码改变世界

图片会自动按比例缩小(js版和css版)

2009-09-12 15:33  曾祥展  阅读(6387)  评论(0编辑  收藏

 

<title>javascript图片大小处理函数</title>
<script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;

function proDownImage(ImgD){
      
var image=new Image();
      image.src
=ImgD.src;
      
if(image.width>0 && image.height>0){
      
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
    
if(rate <= 1){   
     ImgD.width 
= image.width*rate;
     ImgD.height 
=image.height*rate;
    }
    
else {
                          ImgD.width 
= image.width;
                          ImgD.height 
=image.height;
                  }
      }
}
</script>

</head>

<body>

<img src="999.jpg" border=0 width="150" height="110"  onload=proDownImage(this);   />
<img src="room.jpg" border=0 width="150" height="110" onload=proDownImage(this);   />
</body>

 

 

纯css的防止图片撑破页面的代码,图片会自动按比例缩小

<style type="text/css">
.content-width 
{MARGIN: auto;WIDTH: 600px;}
.content-width img
{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>


<div class="content-width">
  
<p><img src="/down/js/images/12567247980.jpg"/></p>
  
<p><img src="/down/js/images/12567247981.jpg"/></p>
</div>