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