I am trying to change the "image and its image map" size to be reduced by some %. Based on the media screen it should get reduced. But in Microsoft Edge it is not working. (I checked in Chrome, it works perfectly.)
Take a look at the image map example in https://en.wikipedia.org/wiki/The_Club_(dining_club)
I want to zoom it to 80%. I changed by adding the CSS zoom style to the image.
In Chrome: Image and its image map size reduced by 20%.
In Microsoft Edge: Only size of the image is getting reduced by 20% and image map not changed any size.
The issue here is with your use of the zoom property, which has wildly different behavior across top browsers. Firefox, for instance, doesn't even support it according to my cursory testing. Although Microsoft Edge supports zoom, it appears not to consider it in the processing model for image maps.
The processing model does state that resized images should be considered:
For historical reasons, the coordinates must be interpreted relative to the displayed image after any stretching caused by the CSS 'width' and 'height' properties (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the aforementioned CSS properties).
Source: http://www.w3.org/TR/html5/embedded-content-0.html#processing-model-0
Modern browsers, in compliance with this requirement, do support reduced image map coordinates when the image is sized with either width or height. Additionally, you can resize with transform and continue to enjoy properly mapped coordinates:
<img src="imagemap.png" usemap="#areas" id="map">
<map name="areas">
<area href="one.html" shape="circle" coords="100 100 80" title="One">
</map>
We can then transform the size of this:
#map {
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
}
You can see the results here: http://jsfiddle.net/jonathansampson/1Lpqsg76/