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); 
        }            
    });

HTML根据宽度调整高度，而不使用$（window）.resize（）

1 个答案: