使用Bootstrap响应图像并映射jQuery插件

Question

我正在尝试为响应式图像映射添加突出显示功能。我正在使用mapify添加叠加层。我在Bootstrap列中有一个宽度= 100％的响应式图像，我不知道如何使这个插件工作，因为只要我理解，它需要图像具有固定的宽度和高度。我怎么解决这个问题？图像宽度应取决于列宽。

我的代码：

<div id="torso">
    <img src="../img/symptomenchecker/mf.png" id="torso-image" width="100%" usemap="#male-front-map">
    <map name="male-front-map" id="male-front-map">
        <area shape="poly" id="male-front-head-area" coords="854,269,866,272,898,205,897,165,885,160,867,178,877,119,867,73,833,31,791,10,755,0,712,2,668,20,625,55,610,97,608,138,618,181,599,160,588,161,585,186,592,222,611,271,627,270,629,297,650,324,682,360,706,380,739,389,769,384,813,347,848,311,853,292" >
        <area shape="poly" coords="849,310,844,409,910,444,981,476,1011,484,743,544,475,483,547,461,579,437,639,410,636,308,660,333,687,364,718,384,747,387,781,379">
    </map>
</div>

Answer 1

指定的宽度和高度必须与图像的原始大小相匹配。 快速解决方法是将以下内容添加到您的CSS中：

.mapify-imgHolder .mapify {
    width: 9999px;
}