Адаптивные карты изображений

Привет, у меня есть этот HTML-код для карты изображения, части изображения нажимаются, они что-то делают. Но когда размер экрана изменяется, изображение сжимается благодаря моему CSS, но координаты изображения остаются прежними, есть ли способ сделать адаптивную карту изображения, чтобы при изменении размера экрана отображалась и карта изображения. без jquery, пожалуйста. Это мой текущий код.

HTML
<div class="Wrapper2">
    <div class="Title-Context-Box">
                    <img src="ResturantPic/img1.jpg" alt="" width="98%" height="690" usemap="#Map" />
                        <map name="Map" id="Map">
                            <area alt="" title="Table1" onclick="alert('You are clicking on 2');" shape="poly" coords="10,466,56,450,27,446,0,455" />
                            <area alt="" title="Table2" onclick="alert('You are clicking on 2');" shape="poly" coords="42,436,88,441,116,431,75,427" />
                            <area alt="" title="Table3" onclick="alert('You are clicking on 2');" shape="poly" coords="99,424,127,428,156,420,129,414" />
                            <area alt="" title="Table4" onclick="alert('You are clicking on 2');" shape="poly" coords="170,411,179,411,186,409,196,408,203,405,199,402,193,397,180,398,170,398,164,401,163,410" />
                            <area alt="" title="Table5" onclick="alert('You are clicking on 2');" shape="poly" coords="253,425,215,422,222,407,253,407" />
                            <area alt="" title="Table6" onclick="alert('You are clicking on 2');" shape="poly" coords="148,457,126,467,115,488,127,501,145,507,171,507,188,498,218,492,237,476,239,455,229,446,203,441,179,439,152,440,137,446,130,455" />
                            <area alt="" title="Table7" onclick="alert('You are clicking on 2');" shape="poly" coords="339,399,340,412,371,413,367,393" />
                            <area alt="" title="Table8" onclick="alert('You are clicking on 2');" shape="poly" coords="346,442,351,459,398,460,398,446" />
                            <area alt="" title="Table9" onclick="alert('You are clicking on 2');" shape="poly" coords="348,466,350,502,438,501,415,463" />
                            <area alt="" title="Table10" onclick="alert('You are clicking on 2');" shape="poly" coords="492,445,520,464,575,462,544,436" />
                            <area alt="" title="Table11" onclick="alert('You are clicking on 2');" shape="poly" coords="572,431,622,451,656,439,597,414" />
                            <area alt="" title="Table12" onclick="alert('You are clicking on 2');" shape="poly" coords="533,465,560,513,657,498,608,465" />
                        </map>
                    <br>
    </div>
</div>

CSS

.Wrapper2 {      /* My Wrapper CSS*/
    background-color: #FFFFFF;
    height: auto;
    width: 55%;
    border: thin solid #000000;
    align-content:center;
    border-radius: 10px;
    background-color: #000000;
}

.Title-Context-Box {      /* My Title Text Styling Content Box CSS*/
    font-family:Century Gothic;
    font-size: 26px;
    font-weight: normal;
    text-align: center;
    color: #000000;
    background-color: #FFFFFF;
    height: auto;
    width: 98%;
    margin-bottom: 1%;
    margin-right: 1%;
    margin-left: 1%;
    margin-top: 1%;
    border-radius: 10px;
}