image map not working on iOS devices, with large images that get rescaled by the device

Question

I\'m developing an internal web app on our company intranet using PHP. One section of the app displays a couple of high resolution images to the user. These images are in th

Answer 1

I ran into this limitation recently on a project where we needed to be able to zoom and this is what I did to solve it:

• Split the image up into 4 quadrants

• Placed the 4 images into divs with width and height set to 50% and position: absolute;

• Absolutely positioned elements within the quadrant's parent element using percentage values and a high z-index

Like this:

CSS

#map-frame { position: relative; }
.map {
    display: block;
    position: absolute;
    width: 5%;
    height: 3%;
    z-index: 99;
}
.q {
    position: absolute;
    width: 50%;
    height: 50%;
}
.q img {
    display: block;
    max-width: 100%;
}
.q1 {
    top: 0;
    left: 0;
}
.q2 {
    top: 0;
    right: 0;
}
.q3 {
    bottom: 0;
    left: 0;
}
.q4 {
    bottom: 0;
    right: 0;
}

HTML