我已经使用图像映射为网站创建了响应式的页眉和页脚，但带有链接的图像对移动使用没有响应。有没有一种方法可以缩小图像尺寸以供移动使用，同时将链接保持在图像上的正确位置？
我尝试添加到src中，它确实调整了响应页面的图像大小，但没有相应地重新分配链接。 这是针对使用基本模板（通过TAM Retail运行的电子商务）构建的网站，并且由于我的html限制，我无法在html代码中使用meta标签或head标签，这使这一工作变得更加困难。
<!DOCTYPEhtml><html>
<body>
<img src="https://shop.lewisginter.org/UserDefinedImages/CROPPED%20NEWEST%20GiftShop_ecommerce_banner1920x265_06.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="Lewis Ginter Botanical Garden" title="Lewis Ginter Botanical Garden" href="https://www.lewisginter.org" coords="71,36,353,223" shape="rect">
<area target="" alt="Garden Shop Home" title="Garden Shop Home" href="https://shop.lewisginter.org/Default.aspx" coords="509,38,977,230" shape="rect">
</map>
</body>
</html>
将宽度调整为100％可以使图像本身对屏幕尺寸做出响应，但链接也无法调整。