Есть картинка и две виртуальный клавиши при нажатии на которые картинка либо увеличиваться либо уменшаеться.
И есть точки которые расположены в оприделенных местах на картинке.
Проблема в том , что когда меняеш размер картинки то точки остаються на прежних местах. А нужно чтоб разстояние между точками тоже увеличивалось.
К примеру есть точки на носу но елси увеличить картинку то точки сползают а нажно, чтоб оставались прежних местах согласно картике . Как такое реализовать ?
Пример кода:
<body>
<div class="img"> </div>
<div class="zoo_in"> + </div>
<div class="zoom_out"> - </div>
<div class="points">
<div class="point_1"> </div>
<div class="point_2"> </div>
<div class="point_3"> </div>
<div class="point_4"> </div>
<div class="point_5"> </div>
</div>
</body>
body{
width:1080px;
height: 1080px;
margin: 0 auto;
text-align: center;
}
.img{
width: 400px;
height: 400px;
background: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTRYkA9Qju-rFFRfcPMXOdkR7A2Pw1ST0q1fpfRSjDqwshl79PhLPxAiajU);
background-repeat: no-repeat;
background-size: 100%;
}
.zoo_in{
width: 40px;
font-size: 40px;
position: absolute;
top: 0;
z-index:2;
top:400px;
}
.zoom_out{
width: 40px;
font-size: 40px;
position: absolute;
z-index:2;
top: 0;
left: 100px;
top: 400px;
}
.points{
position: absolute;
z-index: 3;
top: 0;
}
.point_1{
width: 20px;
height: 20px;
border-radius: 100%;
background: green;
position: relative;
top:140px;
left: 255px;
}
.point_2{
width: 20px;
height: 20px;
border-radius: 100%;
background: green;
position: relative;
top:130px;
left: 220px;
}
.point_3{
width: 20px;
height: 20px;
border-radius: 100%;
background: green;
position: relative;
top:110px;
left: 290px;
}
.point_4{
width: 20px;
height: 20px;
border-radius: 100%;
background: green;
position: relative;
top:5px;
left: 255px;
}
.point_5{
width: 20px;
height: 20px;
border-radius: 100%;
background: green;
position: relative;
top:150px;
left: 255px;
}
$(".zoo_in").click(function() {
var Car_W = 0 ;
Car_W = Car_W + 20;
var width = $('.img').width();
width = width + Car_W;
$('.img').css({"width": width})
});
$(".zoom_out").click(function() {
var Car_W = 0 ;
Car_W = Car_W - 20;
var width = $('.img').width();
width = width + Car_W;
$('.img').css({"width": width})
});
Пример кода на jsfiddle:
https://jsfiddle.net/my79dwq9/ 
