如何编写JS函数实现图片适配maxdim×maxdim正方形区域的正确缩放？

要让图片保持原始比例，恰好放入maxdim×maxdim的正方形区域（保证缩放后至少有一条边贴合正方形边界，正方形原图则两条边都贴合），我们需要计算两个方向的缩放比例，然后取其中较小的那个——这样能确保缩放后的宽和高都不会超过maxdim，同时尽可能放大图片到最大适配尺寸。

具体逻辑很清晰：

• 先算把宽度缩到maxdim需要的比例：maxdim / width
• 再算把高度缩到maxdim需要的比例：maxdim / height
• 取这两个比例里的最小值，就是我们要的缩放系数

完善后的函数还加了边界判断，避免宽高为0时出现异常：

function scaleImage(width, height, maxdim) {
  // 处理宽高为0的异常情况
  if (width === 0 || height === 0) {
    return [0, 0];
  }
  var scale = Math.min(maxdim / width, maxdim / height);
  return [scale * width, scale * height];
}

几个验证示例 #

• 原图宽1000、高500，maxdim=500：
  缩放比例是Math.min(500/1000, 500/500) = 0.5，缩放后尺寸为[500, 250]，宽度刚好贴合正方形边界
• 原图宽500、高1000，maxdim=500：
  缩放比例是Math.min(500/500, 500/1000) = 0.5，缩放后尺寸为[250, 500]，高度刚好贴合正方形边界
• 原图宽600、高600，maxdim=500：
  缩放比例是Math.min(500/600, 500/600) ≈ 0.833，缩放后尺寸为[500, 500]，两条边都贴合正方形边界

内容的提问来源于stack exchange，提问作者Tom