Responsive image with width = 100%

[engin-can]

Hi,

I have a responsive image with width = 100% inside a Bootstrap column and I don't know how to get this plugin working, because as long as I understand, it requires a fixed width and height. How can I solve this problem? The image width should be dependent on the 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>

[BehrouzSameny]

Hi fbengo i have the same Problem have you find any solution for this issue?

[etienne-martin]

The specified width and height must match the native size of the image. A quick fix would be to add the following to your css:

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

[UksusoFF]

@etienne-martin This really mean that Mapify doesn't support scaled images?

[SporeDev]

Hello,

It does support scaled images.

Let's take for example this code:

<img src="https://sporedev.ro/pleiade/images/Intrare.jpg" usemap="#map" class="map full-img" width="1920px" height="1080px">

I've set the exact size of the image that I am using for the image map. (Right click the image, get the width and the height and write them down in the <img> tag).

If you look closely you can see that I added the full-img class to the image.

The full-img CSS that I used is as follows:

.full-img{
	display: block;
	width: 100%;
	height: 100% !important;
	height: 100vh !important;	
}

If you use Bootstrap you could use img-responsive. In my case I needed to scale the image both vertically and horizontally so I had to resort to using vh.

Hope it helps. :)

[etienne-martin]

Thanks for the tip @SporeDev.

Note that in order to be valid html, you must omit the px unit inside the width and height attributes.