JS网页图片按比例缩放的实现方法

用户上传照片，大小未知；需要生成预览，根据提供给用户的预览区域自行应用并居中；如果图片太大，需要缩放。下图。

一目了然，您可以使用文本对齐：居中。意识到。但是，使用img/的预设宽度和高度属性无法解决缩放问题。因为用户的图片可能很长也可能很宽。我在网上想过他们的关系，根据条件判断如下：if(实际宽度预览最大宽度){zoom width=预览最大宽度}if(实际高度预览最大高度){zoom height=预览最大高度}，但是会有问题。例如，当宽度和高度都缩放时，如果缩放比较不同，图片将不会按比例缩放，变得非常难看。为了按比例缩放，我们需要做出各种判断。这违背了我们希望程序自动化的原则。再想想，虽然我不喜欢数学，但还是很有用的，所以应该还有别的办法。既然是按比例缩放，为什么不计算实际图像和预览区域宽度的关系呢？嗯….果然。事实上，我们只需要缩放宽度或高度。因为比例只有大有小。具体来说，写一个函数来实现：复制代码如下：/***图片按比例自适应缩放* @param img {Element}用户上传的图片* @param maxWidth {Number}预览区域最大宽度* @param maxHeight {Number}预览区域最大高度*/。var resizeImg=function(img，maxWidth，maxHeight){ var w=img.width，h=img.height//当图片小于预览区域时，如果(w maxWidth h maxHeight)返回则不做任何更改；//当实际图片比例大于预览区域的宽高比时，//缩放图片宽度，否则缩放图片宽度w/h maxWidth/maxHeight？img . width=maxWidth : img . height=maxHeight；