本文介绍如何使用JavaScript实现用户上传图片在固定预览区域内的按比例自适应缩放。通过比较图片实际宽高与预览区域最大宽高的比例，仅调整宽度或高度中的一个维度，确保图片不变形且居中显示。该方法适用于未知尺寸图片的预览场景，避免手动判断带来的复杂性。
图片预览需求与居中方案
当用户上传照片时，其原始尺寸往往是不确定的。为了提供良好的用户体验，系统需要生成一个预览图。该预览图必须严格限制在指定的预览区域内，并实现居中显示。如果图片尺寸超过了预览区域的限制，则必须按照原始比例进行缩放，以确保图像内容完整且不变形。
关于居中显示，可以通过CSS样式 text-align:center; 轻松实现。然而，对于按比例缩放，仅仅预设 <img /> 标签的 width 和 height 属性是行不通的。这是因为用户上传的图片可能是长条形，也可能是宽扁形，简单的固定尺寸无法同时满足这两种情况。
初步思考时，可能会尝试通过条件判断来处理：如果实际宽度大于预览最大宽度，则将缩放宽度设为预览最大宽度；如果实际高度大于预览最大高度，则将缩放高度设为预览最大高度。但这种做法存在明显缺陷：当宽度和高度同时被缩放且缩放比例不一致时，图片会发生变形，导致视觉效果极差。
按比例缩放的数学逻辑与实现
为了实现严格的按比例缩放，避免手动编写复杂的判断逻辑违背自动化的初衷，我们需要借助数学方法。核心思路是利用实际图像尺寸与预览区域尺寸的比例关系来计算缩放因子。既然目的是保持比例，我们只需要关注宽度或高度中较大者对应的缩放即可。具体来说，无论图片形状如何，我们永远只需要调整宽度或高度中的其中一个维度，因为比例关系只有“大”和“小”两种情况。基于此逻辑，我们可以编写一个通用的处理函数。
具体实现代码如下：
/**
* 图片按比例自适应缩放
* @param img {Element} 用户上传的图片
* @param maxWidth {Number} 预览区域的最大宽度
* @param maxHeight {Number} 预览区域的最大高度
*/
var resizeImg = function(img, maxWidth, maxHeight){
var w = img.width,
h = img.height;
// 当图片比预览区域小时不做任何改变
if(w < maxWidth && h < maxHeight) return;
// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度，反之缩放图片宽度
w/h > maxWidth/maxHeight ? img.width = maxWidth : img.height = maxHeight;
复制代码