我正在尝试绘制下图中的所有数字，我已经完成了。但现在我想根据窗口的宽度动态调整图像和地图的大小。
这是相关的html：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>20 Keys</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Start of first page: #home-->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<img src="images/20keyslogo.jpg" width="100%">
</div><!-- /header -->
<div class="white" data-role="content" data-theme="b">
<img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
<area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
<area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
<area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
<area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
<area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
<area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
<area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
<area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
<area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
<area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
<area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
<area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
<area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
<area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
<area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
<area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
<area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
<area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
<area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
</map>
<p><a href="#two" data-role="button">Interactions between any two keys</a></p>
<p><a href="#about" data-role="button">About 20 Keys</a></p>
<p><a href="http://www.20keysglobal.com" data-role="button">Visit International 20 Keys Website</a></p>
<p><a href="#register" data-role="button" data-rel="dialog" data-transition="pop">Register for Pro Version</a></p>
<p><a href="mailto:[email protected] /cdn-cgi/l/email-protection" data-role="button">Make Suggestion for Improvement</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<p class="margin">
<a href="#home" data-rel="back" data-role="button" data-inline="true" data-icon="gear">Settings</a>
</p>
</div><!-- /footer -->
</div><!-- /page one -->
这是我从最佳答案中使用的javascript动态调整图像映射和图像的大小 https://stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images/13322059?noredirect=1#comment36515252_13322059（感谢提莫）：
window.onload = function () {
var ImageMap = function (map) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 604;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function () {
var n, m, clen,
x = document.body.clientWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join(',');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('20Keys'));
imageMap.resize();
return;
}
图像和地图确实根据窗口宽度调整大小，但不幸的是不如我希望的那么完美。当窗口大小调整时，只有第一个键实际上可以完美地调整大小。对于其余的，离左上角越远，它就越不准确。
我已经将图像更改为完美的正方形，希望它能解决问题，但事实并非如此。
我对 javascript 不太有经验，而且我的数学能力也不如以前了。所有帮助将不胜感激。先感谢您。
