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

2016-04-26 16:22:21 来源: 阅读:

动态等比例调整图片大小的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/

爱程序网

Tags：[db:关键字]