Dynamic width and weight breaking on image

[calliday]

I am curently seeing this issue in Chrome 81.0.4044.138 and Firefox 76.0.1 on both a codepen and a wordpress site.

Applying the maphighlight function to an image is preventing css width updates to that image from media screen size queries. For example, the size of the image normally updates at 1400, 1200, and 800px width, but as soon as I list the image as having the 'map' class, the image size stays what it was when the window initially loaded and disregards the media query changes.

This is not to say that the map highlight isn't changing size - I have a function in place that changes the scale of the map, and that works, but the image is somehow static.

I have been reviewing the code for some time today and can't find the bug. Is someone familiar with the code and might know what is preventing the image from changing its size?

[msetten]

I'm having a similar issue, though not based on media screen size queries, but with images that should automatically resize when the browser resizes. I have a function that automatically recalculates the map coordinates when the images resizes. But the moment I use this function, resizing doesn't work any longer. So either I cannot have automatically resizing images or I cannot use area highlights using maphilight. I believe it is caused by the fact that an is rewritten into a div with fixes width and height and the image as a background images which no longer resizes. Is there a way to have the div rewritten when the browser resizes? That would probably also solve the original poster's issue.