Question

我正在使用ImageMapster jquery脚本来创建一个imagemap。作者提供了一个小提琴，展示了如何响应地调整图像地图的大小。如果您希望地图占据页面宽度的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);   
}

Answer 1

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

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

这是一个工作小提琴：

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

响应式图像映射调整大于100％的容器

1 个答案: