HTML resize height based on width without using $(window).resize()

Question

Basically, I'd like to keep an element size at a certain ratio with the height, say maintaining the same value or 50% as the width. The width is determined by the browser window size. Doing that in jQuery, I'd simply write something like use the following

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

However, I was wondering if there was a more efficient way of doing this without using .resize(). The reason I'm asking is because I'm writing a plugin for myself that will be applied to all elements which I want to keep a certain aspect ratio. Ideally, the plugin will only change the css style of the element.

[http://stackoverflow.com/a/6615994/2359055](http://stackoverflow.com/a/6615994/2359055) you can check this answer — Abraham Uribe, Jul 10 '13 at 18:45
Look promising. I think this is the ideal solution using only CSS. Will read it in its entirety. — BringMeAnother, Jul 10 '13 at 18:53

score 0 · Answer 1 · answered Jul 10 '13 at 18:43

This is function I wrote to do something similar. I wanted to make my side bar div that same height as my main content div. It may or may not help.

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

I know exactly what this code does and sorry, but it doesn't really answer my question. The main difference is no matter what your browser size it, the heights of your main and sidebar are constant. — BringMeAnother, Jul 10 '13 at 18:46
@BringMeAnother I know but I figured you could probably edit the conditional statements and variables that you want to get and change them. O'well, good luck! — Iron3eagle, Jul 10 '13 at 18:49

HTML resize height based on width without using $(window).resize()

1 Answers1