javascript - 根据宽高比将图像尺寸限制为最大高度和最大宽度

Question

我有一个名为 getMediaSize 的函数，它接受图像高度和图像宽度:

const MAX_HEIGHT = 500
const MAX_WIDTH = 600
function getMediaSize(iw, ih) {

}

我希望该函数根据宽高比返回适合 MAX_WIDTH x MAX_HEIGHT 尺寸的新图像宽度和高度。

例如，getMediaSize(1200, 800) 应返回 { w: 600, h: 400 }

Answer 1

如果我们单独查看每个维度，很容易看出调整的数学原理。

MAX_DIMENSION = CURRENT_DIMENSION * ADJUSTMENT

// We need to figure out what the adjustment is, we have the other two values
// do some algebra and we get
ADJUSTMENT = MAX_DIMENSION / CURRENT_DIMENSION

出现的问题是每个维度都有自己的调整值，这会导致图像拉伸(stretch)/压缩(长宽比不会保持不变)。因此，我们只需选择一个调整值来使用，但选择哪一个呢？当然是最小的，否则其中一个维度会溢出。

// Calculate which adjustment is the smallest, width or height
// otherwise we'd overflow one of them.
let widthPercent = MAX_WIDTH / iw;
let heightPercent = MAX_HEIGHT / ih;
let smallestPercent = Math.min(widthPercent, heightPercent);

// This works for both scaling up and scaling down
return {
    w: iw * smallestPercent,
    h: ih * smallestPercent
}