javascript - jQuery 图像 map 响应只有一种方式

Question

我有一个带有一些叠加层的响应式图像 map 。

但只有当我缩小浏览器窗口时它才会调整大小，当我再次调整为大浏览器窗口时，它会保持我所达到的最小尺寸。我做错了什么？

调整大小时，它遵循 .page_content 的宽度，它具有响应性并且在调整大小时效果很好。我使用 imagemapster。

这是我的代码:

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();
  });

Answer 1

通过编辑解决

if (imgWidth/maxWidth>imgHeight/maxHeight) {

至

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