Verwenden von Javascript-Variablen basierend auf Ansichtsfenster-Bemaßungen zum Ändern der CSS-Eigenschaften

Question

JavaScript kann ich momentan nicht verstehen, oder warum es nicht funktioniert.

Ich versuche, JavaScript-Variablen basierend auf den Abmessungen des Ansichtsfensters zu verwenden, um die Größe eines Div anzupassen (so wird das Div speziell für die Abmessungen eines Mobiltelefons erweitert oder verkleinert, oder wenn Sie von Querformat zu Hochformat wechseln.)

Derzeit zeigt es im Chrome-Inspektor das div in 0 0 (obere linke Ecke) mit den Dimensionen 0px x 0px an. Die Datei console.log stellt Dimensionen des Ansichtsfensters bereit und gibt an, ob es als Hoch- oder Querformat angezeigt wird.

Zusätzlich kann ich bestätigen, dass das Bild in dem Verzeichnis ist, in dem ich es eingestellt habe (weil ich an einem Punkt das funktionierte, aber dann brach ich den Hintergrund. Hintergrund arbeitet derzeit wieder).

Hier ist die Javascript bisher -

$(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"); 
    }; 

});

Und die CSS -

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

Der HTML ist nur < div id = 'Wolke'> </div> (ohne Leerzeichen).

Wenn es einen einfacheren Weg gibt, lassen Sie es mich wissen! Jede Hilfe sehr geschätzt!

Answer 1

Für das Ereignis bin bind, sollten Sie die Funktion resizeCloud deklarieren und außerhalb binden.

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

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

Auch, achten Sie auf Argumente von CSS-Methode: http://api.jquery.com/css/

Wie auch immer, Sie versuchen Sie Javascript für eine CSS-Lösung verwenden.

Answer 2

Sie müssen JS dafür nicht verwenden, CSS wird den Trick machen. Fügen Sie einfach "width: 100%" zu Ihrer #cloud hinzu und stellen Sie sicher, dass die #cloud relativ zu einem Container ist, der sich über die gesamte Breite des Bildschirms erstreckt.