jquery image resize when window is resized

Question

I've been searching and improvising and come up with this:

$(window).resize(function() {
    function imgResize()
    {
        if ($("#post_container img").width() > $("#post_container img").height()){
            $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
            }
        else if ($("#post_container img").width() < $("#post_container img").height()){
            $('#post_container img').css({ 'width': 'auto', 'height': '80%' });
            }
        else {
            $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
            }
    }
})

Is that code even right because what it should do is when resizing window it detects if the image is portrait or landscape and resize it so that it fits the screen wholly.

Answer 1

As @terry mentioned you have defined a function but not executed it, What you can do it to move the function outside and call it this way:

function imgResize(){
    if ($("#post_container img").width() > $("#post_container img").height()){
        $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
    } else if ($("#post_container img").width() < $("#post_container img").height()){
        $('#post_container img').css({ 'width': 'auto', 'height': '80%' });
    } else {
        $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
    }
}
$(window).resize(function() {
  imgResize();
}).resize(); //<-----------this will execute when page gets ready.

Or another option is to do all in .resize() handler function:

$(window).resize(function() {
    if ($("#post_container img").width() > $("#post_container img").height()){
        $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
    } else if ($("#post_container img").width() < $("#post_container img").height()){
        $('#post_container img').css({ 'width': 'auto', 'height': '80%' });
    } else {
        $('#post_container img').css({ 'width': '80%', 'height': 'auto' });
    }
}).resize(); //<-----------this will execute when page gets ready.

Answer 2

I somehow got it working as intended and here's the final code so far:

$(window).load(function(){
    imgResize();
    $(window).on('resize', imgResize);
});


    function imgResize(){

        var sW = $("#right_column_post").width();  
        var sH = $(window).height();
        var iW = $("#post_container img").width();
        var iH = $("#post_container img").height();
        var eW = sW - iW; // horizontal space
        var eH = sH - iH; // vertical space

        if(eW > eH){ // more horizontal space
            $("#post_container img").css("height", (sH * 0.7));
            $("#post_container img").css("width", 'auto');

        } else if (eW < eH){ // more vertical space
            $("#post_container img").css("height", 'auto');
            $("#post_container img").css("width", (sW * 0.7));
        } else { // as much space
            $("#post_container img").css("height", 'auto');
            $("#post_container img").css("width", (sW * 0.7));
        } 


    }

It almost work but as you can see when decreasing window width on images that are in landscape ratio the image ratio is distorted for a while:

http://tomiphotography.com/?p=158

The images also flicer a bit when loading the page. That I could forgive but the ratio needs to be fixed.