0

私はスクリプトを作成しました: http://jsfiddle.net/radar24/XZgh4/は、指定されたディメンションを外側の div にスケーリングします。200 x 99 などの寸法を入力するまで、すべて問題ないように見えます。その後、ボックスが外側に大きくなります。

これの原因を本当に見つけることができません。誰か助けてもらえますか？

4

3 に答える 3

1

問題は、両方の軸に沿ってプロポーションを制限していないことです。ボックスの高さ:幅の比率は 5:3 です。両方の軸に沿って制限しないと、ボックスの外側に出血する可能性があります. 例はこれを最もよく示しているかもしれません。

高さが 2 つの次元のうち大きい方の場合を考えてみましょう。あなたのコードは、500px 軸に沿ってのみ制限しています。したがって、5:>3 の比率のボックスをそこに投げると、クリーピング エッジが得られます。

たとえば、ボックスに「3」と「5」を入れます。完璧にフィットします。今度は 3.1 と 5 にします。

次元の比率がこの境界を超えるかどうかを THEN が判断する各セクションに、別の if ステートメントを追加する必要があります。上記の場合、5:3.1 の高さが 500px ではなく、3.1 が 300px になる高さ (500px 未満) になるようにする必要があります。それは483pxになります。

それは理にかなっていますか？

そうでない場合は、もう一度言い換えてみます。

既にある 2 つの 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: また、それをきれいにして、アスペクトだけを使用してこれを行うこともできます。私はあなたのために最初のものをしました。あと3つ！

于 2012-10-08T22:48:16.053 に答える
0

それはかなり小さな間違いです。とを比較する前に、widthとを整数に変換するのを忘れました。したがって、に変更する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 に答える