画像を拡大/縮小しながら画像に円を描く

Question

画像が1つあり、css3を使って描いた円があります。

画像を拡大/縮小するときに、画像の同じ位置に円の位置を保持したいので、画像を拡大/縮小すると円が平行移動しますが、画像の拡大/縮小で円を翻訳する必要がある座標を計算します。なにか提案を！！

画像と円がHTML

Answer 1

で兄弟要素であり、それは私にしばらく時間がかかったが、私は<img>タグと位置と別の要素で使用することができます何か書いた：絶対に;.

$(document).ready(function() { 
 
    function setDimentions(first) { 
 
    IW = $('.img_container img').width(); 
 
    IH = $('.img_container img').height(); 
 
    PW = $('.pointer').outerWidth(); 
 
    PH = $('.pointer').outerHeight(); 
 
    pointerL = Number($('.pointer').css('left').replace('px', '')); 
 
    pointerT = Number($('.pointer').css('top').replace('px', '')); 
 
    if (first) { 
 
     Lperc = pointerL * 100/IW; 
 
     Tperc = pointerT * 100/IH; 
 
     Wperc = PW * 100/IW; 
 
     Hperc = PH * 100/IH; 
 
    } 
 
    Lpx = Lperc * IW/100; 
 
    Tpx = Tperc * IH/100; 
 
    Wpx = Wperc * IW/100; 
 
    Hpx = Hperc * IH/100; 
 
    } 
 
    setDimentions(true); 
 
    $(window).on('resize', function() { 
 
    setDimentions(); 
 
    $('.pointer').css({ 
 
     'width': Wpx, 
 
     'height': Hpx, 
 
     'top': Tpx, 
 
     'left': Lpx 
 
    }) 
 
    }) 
 
});

* { 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
.img_container { 
 
    width: 80%; 
 
    margin: 0 10%; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.pointer { 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 999px; 
 
    border: thin solid red; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 16%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="img_container"> 
 
    <img src="http://i.imgur.com/XXxgr7xg.jpg"> 
 
    <div class="pointer"> 
 
    </div> 
 
</div>