In short, I have multiple draggable images on a map enclosed in anchor tags (<a><img></a>) to enable keyboard dragging. The original image sizes vary, but they are all too large, so I reduced them to 20% of their original sizes using the following CSS:
img {
width: 20%;
}
The issue I'm facing is that the anchor tags retain the original image size's width:
https://i.stack.imgur.com/TDaYy.png
For example: https://jsfiddle.net/n8egfdb9/
I know that setting the anchor tag width to match the image's pixels can be done, but with numerous images of different sizes, this approach isn't feasible.
Unfortunately, width: fit-content doesn't affect the anchor tag's size.
I attempted using JavaScript to fetch the image size and set corresponding width and height values, which worked initially. However, when resizing the screen, it proved non-responsive. I am unaware of any JS methods that detect responsive element resizing.
Any advice or suggestions would be greatly appreciated. Thank you in advance.