将div的宽度定义为高度的百分比

Question

我需要在调整浏览器窗口大小时保留div的宽高比。

我已经对此进行了很多搜索，只要屏幕宽度发生变化，就可以使用填充来保持div的宽高比，使其高度相对于宽度。

该技术在Stack Overflow上显示here，特别是，此linked to示例显示了该技术的实际应用。

但我需要做相反的事情。我不需要相对于div的宽度设置高度，而是每当浏览器窗口的高度发生变化时，我都需要更改div的宽度。我需要这样做，因为我有一个背景图像，我希望内容相对流动，背景图像的高度为100％，并保留其宽高比。

我尝试使用链接方法，但是为垂直属性交换水平方法。它不起作用。我不知道为什么。也许有人可以证明如何做到这一点。

Answer 1

  

每当浏览器窗口的高度发生变化时，我都需要更改div的宽度。

对于纯CSS解决方案，您必须等待更广泛地实施calc()或vh单元。

Answer 2

我不知道在纯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');
});