jquery - HTML 根据宽度调整高度而不使用 $(window).resize()

Question

基本上，我想将元素大小与高度保持一定比例，比如保持与宽度相同的值或 50%。宽度由浏览器窗口大小决定。在 jQuery 中这样做，我只需编写类似使用以下内容的内容

$(window).resize(function() {
    $element = $('.keep-ratio');
    $element.css("height", $element.css("width"));
});

但是，我想知道是否有更有效的方法可以在不使用 .resize() 的情况下执行此操作。我问的原因是因为我正在为自己编写一个插件，该插件将应用于我想保持一定纵横比的所有元素。理想情况下，插件只会更改元素的 css 样式。

Answer 1

这是我写的做类似事情的函数。我想让我的侧边栏div与我的主要内容高度相同div。它可能有帮助，也可能没有帮助。

function resetEqualHeight() {
    $(document).ready(function(){
        var sideHeight, mainHeight, maxHeight;
        var sidebar = $("#sidebar");
        var main = $("#main");

        sideHeight = parseFloat(sidebar.css("height"));
        mainHeight = parseFloat(main.css("height"));    

        if (sideHeight != mainHeight) {
            if (sideHeight < mainHeight) {
                maxHeight = mainHeight;
            } else {
                maxHeight = sideHeight;
            }

            maxHeight += 25;

            main.css("height", maxHeight);
            sidebar.css("height", maxHeight); 
        }            
    });