Ограничить размер изображения до максимальной высоты и максимальной ширины в соответствии с соотношением сторон

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

Вот рабочий пример https://codepen.io/Kison/pen/JjdaMda

А вот исходный код

const MAX_HEIGHT = 500;
const MAX_WIDTH = 600;

function getMediaSize(iw, ih) {
  let 
    ratio = 0,
    height = ih,
    width = iw
  ;  

  if (iw > MAX_WIDTH && iw > ih) 
  {   
      height = MAX_WIDTH / (iw / ih /* aspect ratio */);
      width = MAX_WIDTH;
  } 
  else if (ih > MAX_HEIGHT && ih > iw) 
  {    
      width = MAX_HEIGHT / (ih / iw /* aspect ratio */);
      height = MAX_HEIGHT;
  }

  return {
    width: Math.round(width),
    height: Math.round(height)
  }
}

Answer 2

Если мы посмотрим на каждое измерение по отдельности, то просто увидеть математику для корректировки.

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

Проблема, которая возникает, заключается в том, что каждое измерение будет иметь свое собственное значение регулировки, что приводит к растяжению / сжатое изображение (соотношение сторон не остается прежним). Таким образом, нам нужно выбрать только одно из значений настройки для использования, но какое? Конечно, самое маленькое, иначе одно из измерений будет переполнено.

// 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
}