0

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

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

4

3 回答 3

1

问题是你没有限制你在两个轴上的比例。您的盒子的高度：宽度比例为 5:3。如果您不沿两个轴进行限制，则可能会在框外流血。一个例子可能最好地说明这一点。

以高度为两个维度中较大者为例。您的代码仅将其限制在 500px 轴上。因此，如果我们把一个比例为 5:>3 的盒子扔进去，你会得到一个爬行边缘。

例如，把“3”和“5”放在你的盒子里。完美契合。现在让它成为 3.1 和 5。Ruh roh。

您需要在每个部分中添加另一个 if 语句，然后确定尺寸比是否超出此边界。在上述情况下，您需要使 5:3.1 的高度不是 500px，而是使 3.1 等于 300px 的高度（小于 500px）。那将是 483 像素。

这有意义吗？

如果没有，我会尝试重新措辞：

将另一组 if 语句放在您已有的两个 if 语句中。这些检查是否在设置 LARGER 维度时，是否使 SMALLER 维度在该方向上超出框的边界。在伪代码中

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

只是问我这是否不够清楚！

编辑：这是一个正确的 JSFiddle。如果您希望每个边缘都有一个白色边框，则需要添加更多代码。

Edit2：这是白色边框回来了！

Edit3：您也可以尝试对其进行美化并仅使用方面来做到这一点。我为你做了第一个。三个去！

于 2012-10-08T22:48:16.053 回答
0

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

于 2012-10-08T22:42:23.053 回答
0

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

改变了jsfiddle

....

        height = parseInt($('#height').val()) || 0;// making 0 as default value.
        width = parseInt($('#width').val()) || 0;
....
于 2012-10-08T22:49:40.413 回答