Позиционирование блоков относительно background-image

div { 
    position: relative; 
    width: 0; 
    height: 0; 
    padding: 21% 50%; 
    background-image: url(https://i.stack.imgur.com/GY6vm.png); 
    background-size: 100%; 
} 
a { 
  position: absolute; 
  width: 12.1%; 
  height: 28.9%; 
 } 
a:nth-child(1) { 
    top: 44.2%; 
    left: 19.7%; 
} 
a:nth-child(2) { 
    top: 36.2%; 
    left: 32.3%; 
} 
a:nth-child(3) { 
    top: 21.2%; 
    left: 44.9%; 
} 
a:nth-child(4) { 
    top: 50.7%; 
    left: 57.4%; 
}

<div> 
<a href='#1'></a><a href='#2'></a><a href='#3'></a><a href='#4'></a> 
</div>