控制图片比例、等比例控制图片最大宽高。

最新推荐文章于 2020-04-09 13:52:06 发布

原创最新推荐文章于 2020-04-09 13:52:06 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function

JS图片特效专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个用于实现图片自适应缩放的JavaScript函数。该函数通过比较原始图片尺寸与预设的最大尺寸来调整图片的显示大小，确保图片能够在不同尺寸的显示设备上保持良好的视觉效果。

//***控制图片比例*********//
// HuTao_oImg : 图片对像 //
// maxWidth : 最大宽度    //
// maxHeight : 最大高度   //
// 调用方法 : <img src="**.jpg" onload="HuTao_DrawImage(this,120,80)">
function HuTao_DrawImage(HuTao_oImg,maxWidth,maxHeight)
{
var initialWidth = HuTao_oImg.width;
var initialHeight = HuTao_oImg.height;
var goalWidth = initialWidth;
var goalHeight = initialHeight;

if (initialWidth > maxWidth || initialHeight > maxHeight) {
  if (initialWidth / maxWidth >= initialHeight / maxHeight) {
   var goalWidth = maxWidth;
   var goalHeight = (initialHeight * maxWidth) / initialWidth;
  }
  else {
   var goalWidth = (initialWidth * maxHeight) / initialHeight;
   var goalHeight = maxHeight;
  }
}
else if (initialWidth < maxWidth && initialHeight < maxHeight) {
  if (initialWidth / maxWidth >= initialHeight / maxHeight) {
   var goalWidth = maxWidth;
   var goalHeight = (initialHeight * maxWidth) / initialWidth;

  }
  else {
   var goalWidth = (initialWidth * maxHeight) / initialHeight;
   var goalHeight = maxHeight;
  }
}
HuTao_oImg.width = goalWidth;
HuTao_oImg.height = goalHeight;
}