0

基本的に、要素のサイズを高さと一定の比率で維持したいと思います。たとえば、幅と同じ値または 50% を維持します。幅は、ブラウザ ウィンドウのサイズによって決まります。jQueryでそれを行うと、次のように書くだけです

$(window).resize(function() {
    $element = $('.keep-ratio');
    $element.css("height", $element.css("width"));
});

ただし、.resize() を使用せずにこれを行うより効率的な方法があるかどうか疑問に思っていました。私が尋ねている理由は、特定のアスペクト比を維持したいすべての要素に適用される自分用のプラグインを書いているからです。理想的には、プラグインは要素の CSS スタイルのみを変更します。

4

1 に答える 1

0

これは、似たようなことをするために私が書いた関数です。divサイド バーをメイン コンテンツと同じ高さにしたかったのdivです。役立つ場合とそうでない場合があります。

function resetEqualHeight() {
    $(document).ready(function(){
        var sideHeight, mainHeight, maxHeight;
        var sidebar = $("#sidebar");
        var main = $("#main");

        sideHeight = parseFloat(sidebar.css("height"));
        mainHeight = parseFloat(main.css("height"));    

        if (sideHeight != mainHeight) {
            if (sideHeight < mainHeight) {
                maxHeight = mainHeight;
            } else {
                maxHeight = sideHeight;
            }

            maxHeight += 25;

            main.css("height", maxHeight);
            sidebar.css("height", maxHeight); 
        }            
    });
于 2013-07-10T18:43:30.367 に答える