自适应图像地图的大小大于容器的100％ [英] Responsive image map resizes larger than 100% of container

问题描述

我正在使用ImageMapster jQuery脚本创建图像映射.作者提供了一个小提琴，展示了如何响应地调整图像地图的大小.如果您希望地图占据页面宽度的100％，则此方法有效.但是，如果像我在下面的示例中那样(使用作者的响应示例)在地图周围放置一个边界容器，则其大小会远远超出边界框的宽度. (当您查看下面的小提琴时，请尝试扩大您的浏览器).如何更改此调整大小代码以强制地图不扩大超出其容器的宽度?常规的CSS最大宽度不能做到这一点.

I am using the ImageMapster jquery script to create an imagemap. The author offers a fiddle showing how to resize the image map responsively. It works if you want your map to take up 100% of the width of the page. However, if you put a bounding container around the map, as I have in the below example (using the author's responsive example), it resizes well past the width of the bounding box. (Try to enlarge your browser when you view the below fiddle). How can I alter this resize code to force the map not to enlarge past the width of its container? Regular css max-width doesn't do it.

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

这是他用来计算尺寸的代码:

Here's the code he uses to calculate the size:

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);   
}

推荐答案

欢迎.我是个白痴.在发布此代码后，我立即注意到窗口调整大小的代码引用了$(window).width.我只是将其更改为我的容器div-在这种情况下:$(.content).width即可解决.

Welp. I'm an idiot. Right after I posted this, I noticed the window resize code references $(window).width. I just changed it to my container div - in this case: $(.content).width and that solved it.

我打算删除问题，但认为应该保留该问题，以免对他人有所帮助，因为官方ImageMapster示例未提供任何说明.

I was going to delete the question, but figured I should leave it in case it helps someone else, since the official ImageMapster example doesn't offer any instructions for this.

这是一个工作的小提琴:

Here's a working fiddle:

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

这篇关于自适应图像地图的大小大于容器的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！