定義div的寬度作爲高度的百分比

Question

當瀏覽器窗口調整大小時，我需要保留div的寬高比。

我已經在這方面做了很多搜索，只要屏幕寬度改變，就可以使用填充來保持div的高寬比，方法是使其高度與其寬度相關。

該技術是對堆棧溢出所示here，並且特別地，本linked to示例示出了在操作的技術。

但我需要做相反的事情。而不是使高度相對於div的寬度，我需要div的寬度隨着瀏覽器窗口的高度改變而改變。我需要這樣做，因爲我有一個背景圖像，我希望內容相對於該背景圖像流動，並且該背景圖像具有100％的高度，並且其縱橫比被保留。

我曾嘗試使用鏈接方法，但交換水平垂直屬性。它不工作。我不知道爲什麼。也許有人可以展示如何做到這一點。

Answer 1

我不知道這是否可能在純CSS，但與jQuery的一個可能的方法，請參閱this discussion

可能像mmoustafa建議：

$(window).resize(function() { 
    $('#my-div').css('width', window.innerHeight*0.4+'px'); 
    $('#my-div').css('height', window.innerHeight*0.2+'px'); 
}); 

Answer 2

我需要的只要瀏覽器窗口的高度被改變，div的寬度就會改變。

對於純CSS的解決方案是，你將不得不等待更廣泛實施的任何calc()或vh單元。