Question

I’m trying to find a way to create a responsive image map. Right now I’m trying to use this jquery plugin (https://github.com/stowball/jQuery-rwdImageMaps)

The problem is that (from what I can tell) – I cannot get an image to display as width:100% –

So for example, if my image width is 1200px and my screen is 1500px – there will be an empty space of 300px that the image does not fill. However, it WILL scale down. It just won’t scale up (beyond the size of the original) to fit 100% of larger monitors.

Any thoughts?

Answer 1

Aside from changing the JS, you could target the img in CSS like this:

img[usemap] {
    width:100% !important;
    max-width: none !important;
    height: auto !important;
}