Image not resizing when the page loads

Image not resizing when the page loads

I have an image that needs to resize depending on the size of the screen. On my page if I take the screen and resize it, then it resizes the way it should but if I reload the screen the the image gets squashed. You can see what I'm talking about in my demo. When I resize the screen it works fine, but when I click on run then it gets squashed.

My html
  1. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-wrapper">
        <div class="banner_wrapper active_banner" style="opacity: 1; left: 0%;">
        <img class="bgwidth" src="http://i.imgur.com/YW5Y1YX.jpg" />
        </div>
    </div>

My css
  1. *{
        margin: 0;
        padding:0;
    }

    .slider-wrapper {
        min-height: 355px !important;
        overflow: hidden;
        padding: 0 0 21.8%;
        position: relative;
        width: 100% !important;
    }

    .banner_wrapper {
        height: 438px;
        position: absolute;
        width: 100%;
     }

     .banner_wrapper img {
        position: absolute;
     }

    .bgwidth {
        width: 100%;
    }

my js
  1. function resizeInsideBanner(){
        var pWidth = $(".banner_wrapper img").width();
        var pHeight = $(".banner_wrapper img").height();

        if(pHeight < 359 && (pWidth == $(window).innerWidth() || pWidth > $(window).innerWidth() )){
            $(".banner_wrapper img").css({"left":"50%", "width":pWidth+"px", "margin-left":"-"+pWidth/2+"px"});
            $(".banner_wrapper img").css("height","100%");
        }else if(pWidth < $(window).innerWidth()){
            $(".banner_wrapper img").removeAttr("style");
        }
    }

    $(window).resize(function(){
        resizeInsideBanner();
    });

    $(document).ready(function(){
        resizeInsideBanner();
    });

DEMO