码迷,mamicode.com
首页 > Web开发 > 详细

动态等比例调整图片大小的jQuery代码

时间:2016-01-12 21:28:02      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:

动态等比例调整图片大小的jQuery代码:
有时候图片的大小和尺寸是位置,如果上传后,任由其自然伸展,很有可能导致网页变形,所以要认为的控制图片的尺寸,当然也不能够太粗暴,直接定死图片的尺寸,这样可能会导致图片变形,所以要进行等比例缩放,下面就是一段能够实现此功能的代码。
代码如下:

 

<script type="text/javascript">
jQuery(window).load(function(){
  jQuery("div.product_info img").each(function(){
    DrawImage(this, 680, 1000);
  });
});
 
function DrawImage(ImgD,FitWidth,FitHeight)
{
  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;
      }
    }
  }
}
</script>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11507

更多内容可以参阅:http://www.softwhy.com/jquery/

 

动态等比例调整图片大小的jQuery代码

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/5125492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!