Responsive image with Bootstrap and mapify jQuery plugin -

i trying add highlight feature responsive image map. using mapify add overlay. have responsive image width = 100% inside bootstrap column , don't know how plugin working, because long understand, requires image have fixed width , height. how can solve problem? image width should dependent on column width.

my code:

<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> 

the specified width , height must match native size of image. quick fix add following css:

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