CSSのプロパティを変更するためにビューポートの寸法に基づくjavascript変数を使用する

Question

現在、JavaScriptを学んでいて、これを頭に浮かべることはできません。

divのサイズを調整するために、ビューポートの寸法に基づいてjavascript変数を使用しようとしています（divは携帯電話の寸法に対して特に拡大または縮小するため、または風景からポートレートに切り替えるとき）

現在のところ、Chromeインスペクタでは、divは0 0（左上隅）に0 px x 0pxのサイズで表示されます。 console.logはビューポートの寸法を提供し、ポートレートまたはランドスケープとして表示されている場合に通知します。

さらに、私が設定したディレクトリに画像があることを確認することができます（ある時点で、この作業をしていましたが、背景が壊れました。ここで

は、これまでのjavascriptだ -

$(document).ready(function() { 

    //Variables for viewport height and width. 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 

    //resizeCloud function alters cloud image size by append cloud ID to include H & W variables 
    function resizeCloud() { 
     $('#cloud').css('width: ',windowWidth + 'px'); 
     $('#cloud').css('height: ',windowHeight + 'px'); 
     $(window).resize(resizeCloud); 
    }; 

    //Will advise if app is in portrait or landscape 
    console.log("width: " + windowWidth); 
    console.log("height: " + windowHeight); 
    if (windowWidth < windowHeight) { 
     console.log("Portrait mode"); 
    } else { 
     console.log("Landscape mode"); 
    }; 

}）;

とCSS -

#cloud { 
    background-image: url('images/cloud.png'); 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-size: contain; 

HTMLだけ< DIV ID = '雲'> </DIV>（サンセリフスペース）です。

これを行う簡単な方法がある場合は、教えてください。どのような助けが大いに感謝！

Answer 1

イベントをバインドするには、関数resizeCloudを宣言して外部にバインドする必要があります。

// Declare function 
function resizeCloud() { 
    $('#cloud').css('width', windowWidth + 'px'); 
    $('#cloud').css('height', windowHeight + 'px'); 
}; 

$(window).resize(resizeCloud); // Bind event 

また、CSS方式の引数に注意を払う：http://api.jquery.com/css/

をとにかく、あなたはCSSソリューションのためにJavaScriptを使用しようとしています。

Answer 2

JSを使用する必要はありませんが、CSSはそのトリックを行います。あなたの#cloudに "width：100％"を追加し、#cloudが画面の全幅に及ぶコンテナを基準にしていることを確認してください。