您好，我有这个用于图像 map 的 HTML 代码，点击图像的各个部分会执行某些操作。但是当屏幕尺寸改变时，由于我的 CSS，图像会缩小，但图像坐标保持不变，有什么方法可以制作响应式图像映射，所以当屏幕尺寸改变时，图像映射也会随之改变。请不要jquery。这是我当前的代码。
HTML
<div class="Wrapper2">
<div class="Title-Context-Box">
<img src="ResturantPic/img1.jpg" alt="" width="98%" height="690" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="Table1" onclick="alert('You are clicking on 2');" shape="poly" coords="10,466,56,450,27,446,0,455" />
<area alt="" title="Table2" onclick="alert('You are clicking on 2');" shape="poly" coords="42,436,88,441,116,431,75,427" />
<area alt="" title="Table3" onclick="alert('You are clicking on 2');" shape="poly" coords="99,424,127,428,156,420,129,414" />
<area alt="" title="Table4" onclick="alert('You are clicking on 2');" shape="poly" coords="170,411,179,411,186,409,196,408,203,405,199,402,193,397,180,398,170,398,164,401,163,410" />
<area alt="" title="Table5" onclick="alert('You are clicking on 2');" shape="poly" coords="253,425,215,422,222,407,253,407" />
<area alt="" title="Table6" onclick="alert('You are clicking on 2');" shape="poly" coords="148,457,126,467,115,488,127,501,145,507,171,507,188,498,218,492,237,476,239,455,229,446,203,441,179,439,152,440,137,446,130,455" />
<area alt="" title="Table7" onclick="alert('You are clicking on 2');" shape="poly" coords="339,399,340,412,371,413,367,393" />
<area alt="" title="Table8" onclick="alert('You are clicking on 2');" shape="poly" coords="346,442,351,459,398,460,398,446" />
<area alt="" title="Table9" onclick="alert('You are clicking on 2');" shape="poly" coords="348,466,350,502,438,501,415,463" />
<area alt="" title="Table10" onclick="alert('You are clicking on 2');" shape="poly" coords="492,445,520,464,575,462,544,436" />
<area alt="" title="Table11" onclick="alert('You are clicking on 2');" shape="poly" coords="572,431,622,451,656,439,597,414" />
<area alt="" title="Table12" onclick="alert('You are clicking on 2');" shape="poly" coords="533,465,560,513,657,498,608,465" />
</map>
<br>
</div>
</div>
CSS
.Wrapper2 { /* My Wrapper CSS*/
background-color: #FFFFFF;
height: auto;
width: 55%;
border: thin solid #000000;
align-content:center;
border-radius: 10px;
background-color: #000000;
}
.Title-Context-Box { /* My Title Text Styling Content Box CSS*/
font-family:Century Gothic;
font-size: 26px;
font-weight: normal;
text-align: center;
color: #000000;
background-color: #FFFFFF;
height: auto;
width: 98%;
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1%;
margin-top: 1%;
border-radius: 10px;
}
最佳答案
目前没有 html 代码来执行您想要的操作。如果您使用 css 调整图像大小，则坐标将不再对齐。这是图像映射的一个限制。
或者，您可以尝试 CSS sprites，或使用动态 javascript 创建图像映射。
关于html - 响应图像映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27391505/