使用基於視口尺寸的javascript變量來改變CSS屬性

當前正在學習JavaScript，無法得到我的頭，或爲什麼它不工作。使用基於視口尺寸的javascript變量來改變CSS屬性

我正在嘗試使用基於視口尺寸的javascript變量來調整div的大小（因此div會專門針對手機的尺寸進行擴展或縮小，或者當您從橫向切換爲縱向時）。

目前，在Chrome檢查器中，它顯示0 0（左上角）的div，尺寸爲0px 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>（沒有空格）。

如果有更簡單的方法來做到這一點，讓我知道！任何幫助非常感謝！

來源

2016-05-11 quitepenne

是的:(:(我會編輯我的主帖） – quitepenne

要清楚，你希望你的圖像大小爲100％，基於你的視口大小的權利，不確定問這樣的問題，只是創建了這個https：// jsfiddle。 net/2n255t6v /。如果不需要爲此編寫任何不需要的JS，則使用css本身處理它。 –

爲了讓事件被綁定，您應該聲明函數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/

無論如何，你試圖使用JavaScript的CSS的解決方案。

來源

2016-05-11 15:50:26 alexndreazevedo

你不需要使用JS，CSS就可以做到這一點。只需在您的#cloud中添加「width：100％」，並確保#cloud相對於跨越屏幕全寬的容器。

來源

2016-05-11 14:09:00

使用基於視口尺寸的javascript變量來改變CSS屬性

回答

相關問題