响应式图像地图调整大小大于容器的 100%答案

【问题标题】：Responsive image map resizes larger than 100% of container响应式图像地图调整大小大于容器的 100%
【发布时间】：2015-04-17 03:17:26
【问题描述】：

我正在使用 ImageMapster jquery 脚本来创建图像映射。作者提供了一个小提琴，展示了如何响应地调整图像映射的大小。如果您希望地图占据页面宽度的 100%，它可以工作。但是，如果您在地图周围放置一个边界容器，就像我在下面的示例中所做的那样（使用作者的响应式示例），它的大小会调整到超出边界框的宽度。（当您查看下面的小提琴时，请尝试放大您的浏览器）。如何更改此调整大小代码以强制地图不扩大到其容器的宽度？常规的 css max-width 不会这样做。

小提琴：http://jsfiddle.net/jQG48/999/

这是他用来计算大小的代码：

function resize(maxWidth,maxHeight) {
 var image =  $('img'),
    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);   
}

【问题讨论】：

标签： jquery responsive-design imagemap imagemapster

【解决方案1】：

韦尔普。我是个白痴。在我发布这个之后，我注意到窗口调整大小代码引用了 $(window).width。我只是将它更改为我的容器 div - 在这种情况下：$(.content).width 并解决了它。

我打算删除这个问题，但我想我应该留下它以防它帮助其他人，因为官方 ImageMapster 示例没有提供任何说明。

这是一个有效的小提琴：

http://jsfiddle.net/jQG48/1007/

【讨论】：