Set Height as Half of Container Width

October 11, 2017

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.