Question

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

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

当调整大小时，它遵循.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图像映射只响应一种方式

1 个答案: