css - image goes crazy when zooming screen 125%-175% - css

Question

I've a problem about css because I'm not touching css for now,
I've an image like this with normal zoom (100%):
But the image's goes wrong when zooming in 150%:
Already tried to find any article on internet, still nothing,
can someone provide me an example how to make image goes static at triangle position?
the code i've used:
HTML
<div class="col-md-8 col-sm-8 col-xs-12 nopadding">
<div class="boxtriangle" style="width: 100%;">
<!--<img src="assets/images/bg-triangle.png" width="100%" height="100%" class="img-responsive" usemap="#umbrellamap" id="map_ID">-->
<img src="assets/images/bg-triangle-Copy.png" usemap="#umbrellamap" style="width:100%; margin:0 auto;">
<map name="umbrellamap" style="display:inline; width: 100%">
<!-- coords="x,y,width,heigth" -->
<area shape="circle" coords="146,317,62" href="health.html" alt="health"/>
<area shape="circle" coords="282,317,35" href="legacy.html" alt="legacy" />
<area shape="circle" coords="417,317,42" href="life.html" alt="life" />
<area shape="circle" coords="217,204,42" href="retirement.html" alt="retirement" />
<area shape="circle" coords="346,204,52" href="education.html" alt="education" />
<area shape="circle" coords="282,95,42" href="investment.html" alt="investment" />
</map>
<div class="boxcircle1" id="investment">
<div class="circle-all">
<div class="circle circle-2x">
<a href="investment.html">
<img src="assets/images/icon-invesment.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</a>
</div>
</div>
</div>
<div class="boxcircle2" id="retirement">
<div class="circle-all">
<div class="circle circle-2x">
<img src="assets/images/icon-retirement.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</div>
</div>
</div>
<div class="boxcircle3" id="education">
<div class="circle-all">
<div class="circle circle-2x">
<img src="assets/images/icon-education.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</div>
</div>
</div>
<div class="boxcircle4" id="health">
<div class="circle-all">
<div class="circle circle-2x">
<img src="assets/images/icon-health.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</div>
</div>
</div>
<div class="boxcircle5" id="legacy">
<div class="circle-all">
<div class="circle circle-2x">
<img src="assets/images/icon-legacy.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</div>
</div>
</div>
<div class="boxcircle6" id="life">
<div class="circle-all">
<div class="circle circle-2x">
<img src="assets/images/icon-life.png" class="img-responsive" style="width:85%; text-align:center; display:inline-block; position:relative; top:50%; transform:translateY(-50%)">
</div>
</div>
</div>
</div>
<div class="boxwordcontact" id="umbrellatrans19">But dont worry. we got it covered! contact us <div id="umbrellatrans21">for further information</div>
</div>
</div>
css of class
.boxcircle1 {
position: absolute; display: block; left: 31%; top: 9%;
}
.boxcircle2 {
position: absolute; display: block; left: 22%; top: 38%;
}
.boxcircle3 {
position: absolute; display: block; top: 38%; left: 40%;
}
.boxcircle4 {
position: absolute; display: block; top: 68%; left: 12%;
}
.boxcircle5 {
position: absolute; top: 68%; display: block; left: 31%;
}
.boxcircle6 {
position: absolute; display: block; top: 68%; left: 50%;
}
.circle {
border-radius: 50%;
display: inline-block;
background: #676664;
cursor: pointer;
position: relative;
top:50%;
transform: translateY(-50%);
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.circle:hover {
background: #d0202b;
}
.circle:after {
content: '';
display: block ;
position: absolute ;
top: 0 ;
bottom: 0 ;
left: 0 ;
right: 0 ;
margin:-5px;
border-radius: 50%;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
border: 1px solid #d0202b;
}
.circle:hover:after {
border: none;
}
.circle.active {
background: #d0202b;
}
.circle.done {
background: #6ca843;
}
.circle.done:hover:after {
border: 1px solid #6ca843;
}
.circle-1x {
height: 60px;
width: 60px;
text-align: center;
font-size:26px;
}
.circle-2x {
height: 75px;
width: 75px;
text-align: center;
font-size:32px;
}
.circle-3x {
height: 95px;
width: 95px;
text-align: center;
font-size:45px;
}
.circle-4x {
height: 115px;
width: 115px;
text-align: center;
font-size:54px;
}

Answer 1

Your circles have a fixed size, there is nothing that says, that they should resize according to their parent.
You need something like this on your base class (width is arbitrary):
.circle {
width: 100%;
height: auto;
}
read up here:
https://www.w3schools.com/css/css_rwd_images.asp