It can be a bit challenging, but I'll do my best to explain. I have an image that is sized at 1920 by 1080 pixels and it adjusts based on the window size. The issue arises when the image mapping doesn't adjust accordingly. The coordinates remain fixed and do not scale with the image. How can this be resolved?
<img class="overimage" src="day1_roomstart.png" usemap="#overimage">
<map name="overimage">
<area shape="rect" coords="451, 122, 658, 254" href="menu.html">
</map>
Additionally, here's the CSS related to this:
.overimage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
z-index: 10;
}