我正在尝试学习如何用 HTML 制作一个简单的网站。目前我已经创建了一个背景图像，该图像上有多个形状。我希望图像的不同部分是可点击的链接。我了解如何查找坐标并使用图像地图，但是当我更改屏幕尺寸时，可点击链接不起作用。如何使可点击区域适用于不同的屏幕尺寸？
body, html {
height: 100%;
margin: 0;
}
.bg {
background-position: left;
background-repeat: no-repeat;
background-size: 100% 100%;
} <div class="bg"></div>
<body>
<img src="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg" width="100%" height="100%" usemap="workmap" class="bg">
<map name="workmap">
<area target="_blank" alt="Game1" title="Game1" href="game1.html" coords="243,133,79" shape="circle">
<area target="_blank" alt="Game2" title="Game2" href="game2.html" coords="870,147,680,33" shape="rect">
<area target="_blank" alt="Game3" title="Game3" href="game3.html" coords="889,379,80" shape="circle">
<area target="_blank" alt="CS" title="CS" href="https://code.org/educate/csp " coords="770,671,73" shape="circle">
<area target="_blank" alt="Game4" title="Game4" href="game4.html" coords="163,587,214,492,267,473,335,483,377,603,327,631,249,658,211,641" shape="poly">
</map>谢谢！