<img  id="imgs" style="width:90%;" src="images/mypic.jpg" />
    ============================================================

    <script>

    $(document).on('pageshow', '#index', function(event) {
            resizeimage(awidth,aheight )
    });

    $(window).resize(function() {
            resizeimage(awidth,aheight )
    });




    function resizeimage(maxwidth, maxheight){

    var width = $(imgs).width();    // Current image width
    var height = $(imgs).height();  // Current image height

    // **** this is trace output only
    //$(windowwidth).text($(window).width());
    //$(windowheight).text($(window).height());
    //$(iwidth).text($(imgs).width());
    //$(iheight).text($(imgs).height());


    if(parseInt(width, 10) > maxwidth){

            //$(info).text('bigger');               // trace output
            $(imgs).css("width", maxwidth); // dont allow image to resize larger than its actual                              size
        }else
        {
            //$(info).text('smaller');          // trace output
            $(imgs).css("width", "100%");   // allow image to resize below its actual size
        }

    }

    </script>