定义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单元。