jquery - 调整 div 大小但保持尺寸

Question

我想要一个 <div> react 并适合屏幕窗口大小。 <div>尺寸应为 2:3，因此高度为 3:3，宽度为 2:3。通过编写 width: 200px; 在 css 中制作它很容易和 height:300px; .

问题是我想要 <div> 的高度根据屏幕大小调整大小。而且我还希望调整其中的文本大小。我知道可以通过 javascript 或 jQuery，但我真的不知道怎么做。比如把高度分成三份，然后乘以二，然后得到 .css({'width',newWidth});

它应该和里面的文字差不多。

我找到了正确的方法。我不得不稍微改变一下，但它现在可以工作了。

$(window).resize(function() {
var ratio = 0.6;
$('#hovsa').width($(window).height() * ratio).height($(window).height());
// instead of directly using "$(window).width() * ratio", you can call a method to
// calculate width and height each time window is resized.
})

我已将宽度更改为高度 * 比率，效果非常好。我现在唯一需要做的就是使字体大小也保持一致。

Answer 1

如前所述，如果您想要的大小始终相同，则最好使用百分比值。

但是，在其他情况下，如果您的 div 需要一个固定大小，或者一个计算的大小，您可以监听窗口调整大小事件并进行 css 修改:

$(window).resize(function() {
    var ratio = 0.8;
    $('#divId').width($(window).width() * ratio).height($(window).height() * ratio);
    // instead of directly using "$(window).width() * ratio", you can call a method to
    // calculate width and height each time window is resized.
})