Я создал адаптивный верхний и нижний колонтитулы со ссылками на веб-сайт, использующий карту изображений, но изображения со ссылками не реагируют на мобильное использование. Есть ли способ уменьшить размер изображения для мобильного использования, сохраняя ссылки в правильных местах на изображении?
Я попытался добавить к src, и он изменил размер изображения в зависимости от страницы, но сделалне распространять ссылки соответственно. Это для веб-сайта, который создается с использованием базового шаблона (eCommerce, запускаемого через TAM Retail), и в соответствии с моими html-ограничениями я не могу использовать мета-теги или заголовочные теги в моем html-коде, что делает это намного сложнее.
<!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% позволяет самому изображению реагировать на размер экрана, но ссылки также не корректируются.