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

Question

调整浏览器窗口大小时，我需要保留 div 的纵横比。

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

该技术在此处显示在 Stack Overflow 上，特别是，此链接到示例显示了该技术的实际应用。

但我需要做相反的事情。当浏览器窗口的高度改变时，我需要改变 div 的宽度，而不是使高度相对于 div 的宽度。我需要这样做，因为我有一个背景图像，我希望内容相对于它流动，并且该背景图像具有 100% 的高度，并且保留了它的纵横比。

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

Answer 1

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

对于纯 CSS 解决方案，您将不得不等待更广泛的实现calc()或vh单元。

Answer 2

我不知道这在纯 CSS 中是否可行，但 jQuery 有一种可能的方式，请参阅此讨论

也许像 mmoustafa 这样的建议：

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