How to calculate difference between photo size and jQuery browser screen size?

Question

JavaScript

Greetings friends! Not to say that I am new to JS, but I don't know it well. Now there is a task to find out the size of the picture and the size of the browser window (read the size of the div, because the picture should be located in full screen, and the side that does not fit should go back and forth). I implemented such a solution (the code was cut, the full version of the code can be viewed here ):

var widthImage = $(this).width();
    var heightImage = $(this).height();
  var doc_w, doc_h;
    $(".backgroundImage").css("width", "100%");
    doc_h = $(document).width();
    var difference = heightImage - doc_h;//Получаем остаток не вошедший в экран в пикселях
    if (difference > 1)
    {
      for (var i = difference; i > 1; i -= 1)
      {
        $(".testClass").text("Width: " + widthImage + " height: " + heightImage + " screenWidth " + doc_w + " screenHeight " + doc_h + " difference: " + difference);
        $("#scene").animate({top: '-=1px'}, 1);
      }
    }

The problem is that the actual dimensions of the image are calculated, but they do not change at all when the browser is resized (which is logical). But the image always adjusts to the window using css and its width = 100%. How can I get not the actual size of the image, but the size of its wrapper which is 100% width x Proportional height? For a better understanding of what we are talking about, here is an example of what I did .

Answer 1

Sketch: jsfiddle.net/0hwrb4he . We still need to refine the updatePrimaryDirection function so that it works correctly with vertically oriented images; check how it works in IE9; handle the situation when the proportions of the container and the image are almost equal and the animation becomes very jerky, and similar trifles.

Answer 2

Write down the percentages, an example of how it changes, instead of a picture of ifrem. www.dulsky.eu/v

$(document).ready(function()  
{ $('#player').height($('#player').width()/1.7589879); $(window).resize(function(){
$('#player').height($('#player').width()/1.7589879);});  var bodyHeight = $('body').height();	var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight){$('#player').css({'bottom':'16%'});} ;{$('#t').css({'bottom':'40%'} );}    ;{$('#ms').css({'bottom':'2%'} );};{$('#draggable66').css({'bottom':'1%'} );}
});