Question

我制作了一个脚本：http://jsfiddle.net/radar24/XZgh4/，它将给定的尺寸缩放到外部div中。一切似乎都很好，直到我输入一个200 x 99这样的尺寸。然后盒子在外面生长。

我真的找不到这个原因，有人可以帮忙吗？

Answer 1

问题是你没有限制两个轴的比例。你的盒子有一个高度：宽度比例为5：3。如果不沿两个轴限制，则可以在盒子外面出血。一个例子可能会表现得最好。

以高度为两个维度中的较大者为例。您的代码仅限制它沿500px轴。因此，如果我们在那里以5：> 3比例投掷一个盒子，你会得到一个渐渐的边缘。

例如，在您的框中输入“3”和“5”。适合完美。现在把它变成3.1和5. Ruh roh。

您需要在每个部分中添加另一个if语句，然后确定尺寸比是否超出此边界。在上面的例子中，你需要做到5：3.1的高度不是500px，而是高度（小于500px）使3.1等于300px。那将是483px。

这有意义吗？

如果没有，我会再次尝试改写：

在已有的两个if语句中添加另一组if语句。这些检查是否在设置LARGER尺寸时，使SMALLER尺寸超出该方向的框的边界。在伪代码中

if (height > width)
    calculate the height
    calculate the width
    if (width > div.width)
       width = div.width
       height = div.width * aspect;

请问我这是不是很清楚！

编辑：Here's a JSFiddle让它正确。如果您希望每条边都有白色边框，则需要添加更多代码。

Edit2：Here's the white border come back!

编辑3：您也可以尝试prettying it up并使用方面来执行此操作。我为你做了第一个。三个去！

Answer 2

这是一个很小的错误。在比较它们之前，您忘记将width和height转换为整数。因此，您需要将if (width >= height)更改为if (parseInt(width) >= parseInt(height))。

Answer 3

jQuery .val（）总是返回一个字符串，你应该把它解析成整数

changed jsfiddle

....

        height = parseInt($('#height').val()) || 0;// making 0 as default value.
        width = parseInt($('#width').val()) || 0;
....

使用javascript缩放时保持比例的框

3 个答案: