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

Question

У меня есть функция, которую я использую, чтобы определить абсолютный максимальный размер изображения (при сохранении его соотношения сторон) в пределах определенного прямоугольника. Код, который я сейчас использую, определенно неверен, но я не уверен, где я ошибся.

// Sets the image to the largest proportional size possible
// based on the current browser window dimensions and original
// image size specified by the image loader
function applyLargestProportionalSize() {
    var maxWidth = <width of container>;
    var maxHeight = <height of container>;

    var realWidth = <actual image width>;
    var realHeight = <actual image height>;

    if (realWidth < realHeight && maxWidth > maxHeight) {
        var scaledWidth = Math.min(realWidth, maxWidth);
        $('img').css('width', scaledWidth);
        // let height be determined by the browser
    } else {
        var scaledHeight = Math.min(realHeight, maxHeight);
        $('img').css('height', scaledHeight);
        // let width be determined by the browser
    }
}

Answer 1

Я не знаю javascript, но проблема в том, что ваш код может обрабатывать только те случаи, когда соотношение сторон контейнера меньше единицы, а соотношение сторон изображения больше единицы (или, может быть, я иметь это задом наперед, я не уверен в точном определении соотношения сторон). Попробуйте это:

if (realWidth/realHeight > maxWidth/maxHeight) {
  // everything else the same

Answer 2

Масштабирование размеров изображения для двух случаев:

1. Чтобы соответствовать высоте контейнера, в этом случае вы получите ширину

   scaled_width  = image_width  * container_height / image_height
   scaled_height = container_height
   

2. Для соответствия ширине контейнера, в этом случае вы получите высоту

   scaled_height  = image_height  * container_width / image_width
   scaled_width   = container_width
   

Затем выберите первое, где вычисленный размер помещается в контейнер.

Если изображение и контейнер имеют одинаковое соотношение сторон, они оба подойдут.

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

Если изображение шире, чем контейнер, подойдет только второе.