Как сохранить значения координат при изменении размера изображения? в рельсах

Question

Я использовал свойство карты, чтобы указать ссылку на значение координаты изображения.

Однако, поскольку мы применяем css для предоставления нужного размера в Интернете, ссылка указана в неправильном месте.

Мне интересно, как можно уменьшить размер, сохранив исходные координаты изображения.

index.html.erb

<div class="map">
  <div class="map-txt">map</div>

  <div class="map-section">
      <%= image_tag "map.png" , class: "map-knu" %>
  </div>
    <%= image_tag "map.png" , usemap: "#map1", class: "map-knu" %>
      <map name="map1"> 
        <area shape="rect" coords="21,647,173,822" href="<%= foods_path %>" title="spot1">
        <area shape="rect" coords="388,845,471,923" href="<%= index2_foods_path %>" title="spot2">
        <area shape="rect" coords="275,936,389,1034" href="<%= index2_foods_path %>" title="spot3">
        <area shape="rect" coords="528,19,662,142" href="<%= index2_fleamarkets_path %>" title="spot4">
        <area shape="rect" coords="361,1040,484,1152" href="<%= fleamarkets_path %>" title="spot5">
        <area shape="rect" coords="1206,694,1331,802" href="<%= index3_fleamarkets_path %>" title="spot6">
      </map>
    </div>
</div>

home.scss

.map{
    position: sticky;
    top: 101;
    min-height: 700px;
    background: white;
}
.map-section{
    background: white;
    margin-top: 45%;
}

.map-knu{
    display: contain;
    width: 100%;
}

.map-txt{
    text-align: center;
    font-size: 25px;
    color: white;
    background: gray;
    font-family: 'HangeulNuri-Bold';
}