使用Bootstrap和mapify 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; 
}