Javascript 是否可以有一个容器，在根据屏幕/窗口大小调整大小时保持其纵横比？

我在绘画上做了一个例子

这可能是想得太多了，但我正在尝试一个始终保持纵横比（9:16）的div，它完全显示在屏幕上，不管窗口大小如何。我尝试搜索“div keep aspect ratio”，但在这些情况下，div不会随窗口调整大小。我想使用javascript检查窗口的高度是否大于宽度（反之亦然），并更改css，但我不知道在调整页面大小时是否可以运行javascript函数。另外，我所有的内容都在这个容器中，我只想用黑色的条来填充其余的内容

---

谢谢你的帮助。

有很多方法可以做到这一点

使用javascript调整大小功能：

使用Jquery调整大小功能：

使用css@media

window.onresize = function() {
       // resize your div according to window size
    };

$(window).resize(function(){
    // resize your div according to window size
});

 @media all and (min-height:640px) and (max-height:960px){
    // resize your div according to window size
}