Set Height as Half of Container Width

Another way to style images dynamically based on window sizes is shown below.

If you’re using images that are set to a 2:1 ratio (where width is two times greater than the height), you can use the example below to dynamically scale the height of the containers as windows are loaded / resized.

jQuery(window).load(function(){
    jQuery('.blog_image').height(jQuery('.blog_image').width() / 2);
    jQuery(window).resize(function(){
        jQuery('.blog_image').height(jQuery('.blog_image').width() / 2);
    });
});

Sourced here.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.