jQuery image map responsive only one way

I have a responsive image map with some overlay.

But it only resizes when i make my browser window smaller, when i resize to big browser window again, it keeps the smallest size i have been down to. What am i doing wrong?

When resized it follows the width of .page_content, which is responsive and works great on resizing. I use imagemapster.

Heres my code:

jQuery('#apartment-map').mapster(initial_opts)
  .mapster('snapshot')
  .mapster('rebind',basic_opts);

  var resizeTime = 0; 
  var resizeDelay = 25;

  function resize(maxWidth,maxHeight) {
     var image =  jQuery('#apartment-map'),
      imgWidth = image.width(),
      imgHeight = image.height(),
      newWidth=0,
      newHeight=0;

    if (imgWidth/maxWidth>imgHeight/maxHeight) {
      newWidth = maxWidth;
    } else {
      newHeight = maxHeight;
    }
    image.mapster('resize',newWidth,newHeight,resizeTime);   
  }

  function onWindowResize() {

    var curWidth = jQuery(".page_content").width(),
      curHeight = jQuery(".page_content").height(),
      checking=false;
   if (checking) {
        return;
   }
    checking = true;
    window.setTimeout(function() {
      var newWidth = jQuery(".page_content").width(),
         newHeight = jQuery(".page_content").height();
      if (newWidth === curWidth &&
        newHeight === curHeight) {
        resize(newWidth,newHeight); 
      }
      checking=false;
    },resizeDelay );
  }

  jQuery(window).bind('resize',onWindowResize);
  onWindowResize();
  });

Solved by editing

if (imgWidth/maxWidth>imgHeight/maxHeight) {

To

if (imgWidth/maxWidth>imgHeight/maxHeight || imgWidth/maxWidth<imgHeight/maxHeight) {