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

Question

我做了一个关于油漆的例子

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

感谢您的帮助。

标签： javascripthtmlcssresize

Answer 1

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

1. 使用javascript调整大小功能：

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

2. 使用 Jquery 调整大小功能：

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

3. 使用 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
}