jQuery 图片地图仅以一种方式响应

Question

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

但它只会在我缩小浏览器 window 时调整大小，当我再次调整到大浏览器 window 时，它会保持我一直缩小到的最小尺寸。我做错了什么？

调整大小时，它遵循 .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) {

jQuery 图片地图仅以一种方式响应

jQuery image map responsive only one way

javascript

jquery

imagemapster