是否可以让容器在根据 screen/window 大小调整大小时保持其纵横比？

Question

我做了一个关于绘画的例子

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

感谢您的帮助。

Answer 1

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

使用javascript调整大小功能：

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

使用Jquery调整大小功能：

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

使用css @media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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

是否可以让容器在根据 screen/window 大小调整大小时保持其纵横比？

Is it possible to have a container that keeps its aspect ratio while resizing according to the screen/window size?

html

javascript

css

resize