Javascript 计算比率差？

在我们的网站上，我们有视频缩略图，单击缩略图会在模式对话框中打开视频

视频本身是16:9，但播放器底部有额外的细节，所以不是

在对话框中，我们有两个按钮，增长和收缩

按钮以（原始大小（*|/）growBy）的步骤增长/收缩播放器。因此，对于50%的原始步骤，growBy将为1.5

不管怎么说，这一切都很好，如代码块#1所示

我遇到的问题是，我需要设置一个限制，这样，如果对话框被要求超出窗口的宽度或高度，它只会增长到它可以达到的最大大小（按比例）

例如，如果我们被要求超出窗口的最大宽度，对话框宽度（包括填充）将等于窗口宽度，但高度将不等于（当然，除非对话框比率恰好与窗口匹配，但这不太可能！）

相反，如果我们被要求超出窗口的最大高度，对话框高度（包括填充）将等于窗口高度，但高度将不等于（同样，除非对话框比率恰好与窗口匹配）

这就是我被卡住的地方，我的尝试是在代码块#2中，现在我只是在检查太大的高度，但我做高度很好，问题是，我不知道如何计算出调整高度步长时的宽度。有趣的代码在代码块pre#2中

如果我的想法是正确的，我需要计算出

videoStep.height

tempStep.height

的百分比，然后将

tempStep.width

设置为

videoStep.width+（videoStep.width*percentage）

但我试着做：

var percentage = tempStep.height/videoStep.height;
tempStep.width = videoStep.width+(videoStep.width*percentage);

代替

tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

但由于视频比例丢失，宽度似乎扩大得太多（播放器比例变为586:281）

代码块前#2 代码块#1 代码块#2

---

如果高度需要缩小1，则宽度需要与比率匹配。（因为16/9是指宽度与高度之比）

Psuedo代码：

new_height = max_height;
new_width  = height * ratio;
// where ratio = 16/9

以下是我可能建议更改的内容：

    var ratio = currentPlayerSize.width / currentPlayerSize.height,
        new_height = newPlayerSize.height + dialogDifference.height;

    newDialogSize = {
        height: new_height,
        width:  new_height * ratio
    };

注:

1如果高度>宽度和高度>最大高度，则需要更改高度

或者您的问题可能就在

sizeCalc（）

：

---

代码块#2的作用是什么？这是我实现限制的尝试#pre2是从该块更改而来的主要片段。我更新了我的答案，请告诉我是否有用。：）我不使用对象作为窗口大小数据，而是将它们分配给单独的

windowHeight

/

windowWidth

变量。在查找链中少走一步将使其更快。这也将使它更小型化，更易于阅读。

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height(),
    width: $videoPlayer.width()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width(),
    padding: {
        height: $videoDialog.outerHeight() - $videoDialog.height(),
        width: $videoDialog.outerWidth() - $videoDialog.width()
    }
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var tempStep = {
    height: 0,
    width: 0
};

var useTempStep = false;

var clickHandler = function () {
    var button = $(this);

    if(button.hasClass('disabled')){
        return;
    }

    $growButton.removeClass('disabled');

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, (useTempStep ? tempStep : videoStep), action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    useTempStep = false;
    var fullDialogSize = {
        height: newDialogSize.height+videoDialogSize.padding.height,
        width: newDialogSize.width+videoDialogSize.padding.width
    };
    if(fullDialogSize.height > windowSize.height){

        $growButton.addClass('disabled');

        tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
        tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

        useTempStep = true;

        newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
        newDialogSize = {
            height: newPlayerSize.height + dialogDifference.height,
            width: newPlayerSize.width + dialogDifference.width
        };

    }


    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);

new_height = max_height;
new_width  = height * ratio;
// where ratio = 16/9

    var ratio = currentPlayerSize.width / currentPlayerSize.height,
        new_height = newPlayerSize.height + dialogDifference.height;

    newDialogSize = {
        height: new_height,
        width:  new_height * ratio
    };

    function sizeCalc(currentPlayerSize, step, action){
        var newPlayerSize,
            ratio = currentPlayerSize.width / currentPlayerSize.height;
            new_height;

        if (action == 'grow') {
            new_height = currentPlayerSize.height + step.height;
        } else {
            new_height = currentPlayerSize.height - step.height;
        }

        newPlayerSize =  {
            height: new_height,
            width:  new_height * ratio
        };

        return newPlayerSize;
    }