0

我正在使用 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);   
}
4

1 回答 1

1

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

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

这是一个工作小提琴：

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

于 2015-04-17T03:24:19.990 回答