javascript - 如何按比例调整图像大小/保持宽高比？(How to resize images proportionally / keeping the aspect ratio?)

Question

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, ie the same aspect ratio.

(我有尺寸会很大的图像，我想使用jQuery缩小图像，同时保持比例受限，即长宽比相同。)

Can someone point me to some code, or explain the logic?

(有人可以指出一些代码或解释其逻辑吗？)

  ask by kobe translate from so

Answer 1

I think this is a really cool method :

(我认为这是一种非常酷的方法 ：)

 /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }