有没有办法调整图像大小并让图像映射保持在同一个地方？ （HTML / JavaScript的/ CSS）

Question

我目前正在制作一个旨在测试的网站。它有一个图像和一个图像映射，我试图使用JavaScript来获取客户端屏幕大小和调整图像大小以适应客户端屏幕大小，但当我这样做时，图像映射不是我需要它。有没有办法让图像映射保持在同一个地方，而不必在油漆或Photoshop中“物理”调整图像大小。 My site（无需获取客户端屏幕大小）。基本上我试图使图像适合他们的屏幕，因此它更容易导航测试，它的现实，但没有搞砸我的图像地图定位。任何肝脏都会非常感激。

    `<map name="desktopmap" >
    <area onclick="correct();" shape="rect" coords="1,575,38,597"  href="OS2.html" >  
    </map>
    <img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`

谢谢。

Answer 1

您可以做的是使用具有基于百分比的坐标和尺寸的绝对定位的div，并将您的点击事件挂钩到那些。这应该允许您的隐形“按钮”与图像很好地缩放。图像映射有点过时，不够灵活。

示例小提琴（使用正确/错误的功能更新）：

http://jsfiddle.net/3ZLeK/1/

新的HTML结构示例：

<div class="wrap">
    <img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
    <div class="box box1"></div>    
</div>

示例新CSS：

.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

在小提琴中，我还更改了内联Javascript处理以使用事件处理程序，因为这些属性处理程序也已过时。

Answer 2

您可以使用媒体查询来重新缩放/缩放地图。 这里有两个实验测试：http://dabblet.com/gist/5586117和http://codepen.io/gcyrillus/pen/AJHmt

如果您遵循这个想法，并考虑使用zoom + javascript而不是mediaquerie来包含IE之类的旧浏览器，请注意IE的某些版本同时理解：transform：scale（x）;并缩放：X; 。在这种情况下，请确保你没有两次重拨。

基本上，coords是像素coordonates，缩放是唯一的方法，除非你调整每个coords的每个值：）

......不太确定我的英语是否清晰/正确。