图片比例自适应缩放js代码

下图。

一目了然，您可以使用文本对齐：居中。意识到。但是，使用img/的预设宽度和高度属性无法解决缩放问题。因为用户的图片可能很长也可能很宽。我在网上想过他们的关系，根据条件判断如下：复制代码如下： if(实际宽度预览最大宽度){zoom width=预览最大宽度} if(实际高度预览最大高度){zoom height=预览最大高度}，但是会有问题。比如宽度和高度都缩放时，如果缩放比例不同，图片就不会按比例缩放，会变得很难看。为了按比例缩放，我们需要做出各种判断。这违背了我们希望程序自动化的原则。再想想，虽然我不喜欢数学，但还是很有用的，所以应该还有别的办法。既然是按比例缩放，为什么不计算实际图像和预览区域宽度的关系呢？嗯….果然。事实上，我们只需要缩放宽度或高度。因为比例只有大有小。具体来说，写一个函数来实现：复制代码如下： /** *图片按比例自适应缩放* @param img {Element}用户上传的图片* @param maxWidth {Number}预览区域最大宽度* @param maxHeight {Number}。预览区域的最大高度*/var resize img=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；};完整的测试代码：将代码复制如下：doctype html html head metachar set=' utf-8 '标题图片按比例自适应缩放/title style . CNT { text-align : center；宽度width:600px高度：350 px；margin:0 autoborder:1px实心# ddd}/style/head body div class=' CNT ' img id=' img ' src=' http :http://www . wall COO.com/1920 x1440/1920 x1440 _ nature _ wall papers _ 02/wall papers/1920 x1440/[wall COO.com]_ 1920 x1440 _ nature _ wall papers _ avista 005 . jpg ' alt='支付宝'/br/a href=' 333330 ' /* * *图片按比例自适应缩放* @param img {Element}用户上传的图片* @param maxWidth {Number}预览区域最大宽度* @param maxHeight {Number}预览区域最大高度*/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；};resizeImg(img，500，300)；}/脚本/正文/html